/*
 * Tema base Apólice360 (spec 44).
 *
 * Carregado por último no layout das Areas, depois do CSS legado do template.
 * Toda cor de marca sai das variáveis --a360-*. Cada cliente pode redefini-las em
 * Themes/<Tema>/Content/a360-tema.css, carregado logo depois deste arquivo.
 * Paleta base: Marinho com âmbar (QLICKSEGUROS e AQUISEGUROS).
 */

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);

:root {
    /* Marca (o cliente pode sobrescrever) */
    --a360-primaria: #1E3A5F;
    --a360-primaria-hover: #152B47;
    --a360-primaria-suave: #E8EEF5;
    --a360-primaria-texto: #FFFFFF;
    --a360-destaque: #F2B33D;
    --a360-destaque-texto: #1F2937;
    --a360-menu-fundo: #101D30;
    --a360-menu-texto: #C8D2E0;
    --a360-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Neutros e estados (iguais para todos os clientes) */
    --a360-fundo: #F5F7FA;
    --a360-superficie: #FFFFFF;
    --a360-borda: #E5E7EB;
    --a360-borda-campo: #D1D5DB;
    --a360-texto: #1F2937;
    --a360-texto-secundario: #6B7280;
    --a360-sucesso: #16A34A;
    --a360-alerta: #D97706;
    --a360-erro: #DC2626;
    --a360-info: #0284C7;

    /* Forma */
    --a360-raio: 8px;
    --a360-raio-campo: 6px;
    --a360-sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10);
}

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

body {
    font-family: var(--a360-fonte);
    color: var(--a360-texto);
    background-color: var(--a360-fundo);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--a360-fonte);
    color: var(--a360-texto);
}

a {
    color: var(--a360-primaria);
}

    a:hover,
    a:focus {
        color: var(--a360-primaria-hover);
    }

.text-primary { color: var(--a360-primaria) !important; }
.bg-primary { background-color: var(--a360-primaria) !important; color: var(--a360-primaria-texto); }
.text-muted { color: var(--a360-texto-secundario); }

/* ===== Área de conteúdo =====
 * O fundo cinza ocupa toda a área de conteúdo. Os blocos (formulários em .panel, grids em .a360-grid)
 * ficam em superfícies brancas por cima dele. A faixa com título e breadcrumb continua branca.
 */

section.content {
    background-color: transparent;
}

    /* Faixa de título da página (Views/Shared/_Layout.cshtml): breadcrumb pequeno em cima, título embaixo.
       O markup tem o título antes do breadcrumb; o column-reverse inverte só a exibição. */
    section.content > header.panel-heading2 {
        display: flex;
        flex-direction: column-reverse;
        gap: 4px;
        padding: 14px 24px 16px;
        margin-bottom: 20px;
        background-color: var(--a360-superficie);
        border-bottom: 1px solid var(--a360-borda);
    }

        section.content > header.panel-heading2 h4 {
            margin: 0;
            font-family: var(--a360-fonte);
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3;
            color: var(--a360-texto);
        }

        section.content > header.panel-heading2 .breadcrumb {
            margin: 0;
            padding: 0;
            background-color: transparent;
            border-radius: 0;
            font-size: 12.5px;
            line-height: 1.5;
        }

            section.content > header.panel-heading2 .breadcrumb > li {
                color: var(--a360-texto-secundario);
            }

                section.content > header.panel-heading2 .breadcrumb > li + li:before {
                    padding: 0 6px;
                    color: var(--a360-borda-campo);
                }

                section.content > header.panel-heading2 .breadcrumb > li > a {
                    color: var(--a360-texto-secundario);
                    text-decoration: none;
                }

                    section.content > header.panel-heading2 .breadcrumb > li > a:hover {
                        color: var(--a360-primaria);
                        text-decoration: underline;
                    }

                section.content > header.panel-heading2 .breadcrumb > li:last-child,
                section.content > header.panel-heading2 .breadcrumb > li:last-child > a {
                    color: var(--a360-texto);
                    font-weight: 500;
                }

/* Respiro no topo das telas sem faixa de título/breadcrumb (Views/Shared/_Layout.cshtml) */
.a360-espaco-topo {
    height: 20px;
}

/* Painel solto direto na área de conteúdo (ex.: "Filtro Avançado" do Html.FormFiltro): mesma margem lateral da grid */
section.content > form > section.panel,
section.content > section.panel {
    margin-left: 15px;
    margin-right: 15px;
}

/* Grid gerada pelo Html.DataGridFor (BaseHtmlDataGrid.DataGridRender) */
.a360-grid {
    display: flow-root; /* contém as colunas flutuantes sem cortar os menus da barra da grid */
    /* Grid depois de campos col-md-* flutuantes (ex.: DataGridFor em telas de detalhes): sem o clear, o flow-root
       fica ao lado dos campos, encolhe para 0 de largura e a tabela some */
    clear: both;
    margin: 0 15px 20px;
    padding-top: 15px;
    background-color: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    box-shadow: var(--a360-sombra);
}

    .a360-grid > [class*="col-"] {
        padding-bottom: 15px !important;
    }

/* Grid dentro de outro bloco (formulário, aba, modal ou outra grid): sem borda, sombra nem margem próprias */
.panel .a360-grid,
.modal .a360-grid,
.tab-content .a360-grid,
.a360-grid .a360-grid {
    margin: 0;
    padding-top: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ===== Menu lateral ===== */

aside.left-panel {
    background-color: var(--a360-menu-fundo);
}

.logo-expanded {
    letter-spacing: 0;
    text-transform: none;
}

.navigation > ul > li > a {
    color: var(--a360-menu-texto);
    font-weight: 500;
    border-left: 3px solid transparent;
}

    .navigation > ul > li > a:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.06);
    }

.navigation > ul > li.active > a,
.navigation > ul > li.active:hover > a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    border-left-color: var(--a360-destaque);
}

.navigation ul li ul {
    background-color: rgba(0, 0, 0, 0.18);
}

    .navigation ul li ul li a {
        color: var(--a360-menu-texto);
    }

        .navigation ul li ul li a:hover {
            color: #fff;
        }

.navigation ul li ul li.active a {
    color: var(--a360-destaque) !important;
}

aside.left-panel .footer,
aside.left-panel .footer a {
    color: var(--a360-menu-texto);
    opacity: 0.7;
}

/* ===== Topo ===== */

header {
    background-color: var(--a360-superficie);
    border-bottom: 1px solid var(--a360-borda);
}

    header .navbar-toggle .icon-bar {
        background-color: var(--a360-texto-secundario);
    }

/* Botão "Faça uma Cotação" do topo e versão flutuante do mobile */
#btnCotacao,
#btnCotacao:hover,
#btnCotacao:focus,
.btn.btn-cotacao-flutuante,
.btn.btn-cotacao-flutuante:hover,
.btn.btn-cotacao-flutuante:focus {
    background-color: var(--a360-destaque);
    border-color: var(--a360-destaque);
    color: var(--a360-destaque-texto) !important;
    font-weight: 600;
}

/* ===== Panels e cards ===== */

/* Contém as colunas flutuantes (col-md-*) dos formulários; sem isso o painel fica com altura zero.
   Só no .panel: o .card das telas da cotação usa display: flex. */
.panel {
    display: flow-root;
}

.panel,
.card {
    background-color: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    box-shadow: var(--a360-sombra);
}

.panel-heading,
.panel-default > .panel-heading {
    color: var(--a360-texto);
    border-color: var(--a360-borda);
}

/* O título herda a cor do cabeçalho: algumas telas (ex.: home) pintam o cabeçalho e usam texto branco. */
.panel-title {
    color: inherit;
    font-size: 16px;
}

.panel-footer {
    background-color: var(--a360-fundo);
    border-radius: 0 0 var(--a360-raio) var(--a360-raio);
}

.panel-group .panel {
    border-radius: var(--a360-raio);
}

.panel-group .panel + .panel {
    margin-top: 8px;
}

.card-header {
    background-color: var(--a360-fundo);
    border-bottom-color: var(--a360-borda);
}

/* ===== Botões ===== */

.btn {
    border-radius: var(--a360-raio-campo);
    font-weight: 600;
    opacity: 1;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

    .btn:focus,
    .btn.focus {
        box-shadow: 0 0 0 3px var(--a360-primaria-suave);
    }

/* Seletores .btn.btn-* para empatar com o Themes/<Tema>/Content/theme.css do layout raiz, que usa a mesma forma. */
.btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--a360-primaria);
    border: 1px solid var(--a360-primaria);
    color: var(--a360-primaria-texto) !important;
}

    .btn.btn-primary:hover,
    .btn.btn-primary.hover {
        background-color: var(--a360-primaria-hover);
        border-color: var(--a360-primaria-hover);
    }

.btn.btn-default {
    background-color: var(--a360-superficie);
    border-color: var(--a360-borda-campo);
    color: var(--a360-texto);
}

    .btn.btn-default:hover,
    .btn.btn-default:focus,
    .btn.btn-default:active,
    .btn.btn-default.hover {
        background-color: var(--a360-fundo);
        border-color: var(--a360-borda-campo);
        color: var(--a360-texto);
    }

.btn.btn-success,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active {
    background-color: var(--a360-sucesso);
    border-color: var(--a360-sucesso);
}

.btn.btn-danger,
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active {
    background-color: var(--a360-erro);
    border-color: var(--a360-erro);
}

.btn.btn-info,
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active {
    background-color: var(--a360-info);
    border-color: var(--a360-info);
}

.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active {
    background-color: var(--a360-alerta);
    border-color: var(--a360-alerta);
}

.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-info:hover,
.btn.btn-warning:hover {
    filter: brightness(0.92);
}

.btn-link {
    color: var(--a360-primaria);
}

/* ===== Formulários ===== */

.control-label,
.form-group > label {
    color: var(--a360-texto-secundario);
    font-weight: 500;
}

.form-control {
    background-color: var(--a360-superficie);
    color: var(--a360-texto);
    border: 1px solid var(--a360-borda-campo);
    border-radius: var(--a360-raio-campo);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .form-control:focus {
        background-color: var(--a360-superficie);
        border-color: var(--a360-primaria);
        box-shadow: 0 0 0 3px var(--a360-primaria-suave);
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
        background-color: #F3F4F6;
        color: var(--a360-texto-secundario);
    }

.has-error .form-control {
    border-color: var(--a360-erro);
}

    .has-error .form-control:focus {
        box-shadow: 0 0 0 3px #FEE2E2;
    }

.has-error .help-block,
.has-error .control-label,
.field-validation-error,
.validation-summary-errors {
    color: var(--a360-erro);
}

.input-group-addon {
    background-color: var(--a360-fundo);
    border-color: var(--a360-borda-campo);
    color: var(--a360-texto-secundario);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--a360-borda-campo);
    border-radius: var(--a360-raio-campo);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--a360-primaria);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

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

.table > thead > tr > th {
    background-color: var(--a360-fundo);
    color: var(--a360-texto-secundario);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--a360-borda);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top-color: var(--a360-borda);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--a360-primaria-suave);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FAFBFC;
}

/* Paginação das grids. Seletores com "li" para empatar com o css/bucketadmin/css/bootstrap-reset.css,
   que pinta a página ativa e o hover de verde-água (#2eb4ad). */
.pagination > li > a,
.pagination > li > span {
    margin-left: 4px;
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio-campo);
    background-color: var(--a360-superficie);
    color: var(--a360-texto);
}

    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        border-color: var(--a360-primaria);
        background-color: var(--a360-primaria-suave);
        color: var(--a360-primaria);
    }

.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover,
.pagination > li.active > a:focus,
.pagination > li.active > span:focus {
    border-color: var(--a360-primaria);
    background-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

.pagination > li.disabled > a,
.pagination > li.disabled > span,
.pagination > li.disabled > a:hover,
.pagination > li.disabled > span:hover {
    border-color: var(--a360-borda);
    background-color: var(--a360-fundo);
    color: var(--a360-texto-secundario);
}

/* Seletor de itens por página do bootstrap-table ("10 ▾ registros por página") */
.fixed-table-pagination .page-list .btn-group .btn,
.fixed-table-pagination .page-list .dropdown-toggle {
    border-color: var(--a360-borda-campo);
    background-color: var(--a360-superficie);
    color: var(--a360-texto);
}

.fixed-table-pagination .page-list .dropdown-menu > .active > a {
    background-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

/* ===== Labels, badges e alertas ===== */

.label {
    border-radius: 999px;
    font-weight: 600;
}

.label-primary { background-color: var(--a360-primaria); }
.label-success { background-color: var(--a360-sucesso); }
.label-warning { background-color: var(--a360-alerta); }
.label-danger { background-color: var(--a360-erro); }
.label-info { background-color: var(--a360-info); }
.label-default { background-color: var(--a360-texto-secundario); }

.alert {
    border-radius: var(--a360-raio);
    border: 1px solid transparent;
}

.alert-success { background-color: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alert-info { background-color: #F0F9FF; border-color: #BAE6FD; color: #075985; }
.alert-warning { background-color: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.alert-danger { background-color: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* Etiqueta de status nas grids (AddColumnStatus; tom escolhido em EtiquetaStatus.cs) */
.a360-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

    .a360-status::before {
        content: "";
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
    }

.a360-status--sucesso { background-color: #DCFCE7; color: #166534; }
.a360-status--alerta { background-color: #FEF3C7; color: #92400E; }
.a360-status--perigo { background-color: #FEE2E2; color: #991B1B; }
.a360-status--info { background-color: #E0F2FE; color: #075985; }
.a360-status--aberto { background-color: #EDE9FE; color: #5B21B6; }
.a360-status--neutro { background-color: #F3F4F6; color: #374151; }

/* ===== Abas ===== */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav.nav-tabs > li.active > a {
    color: var(--a360-primaria);
    border-bottom: 2px solid var(--a360-primaria);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

/* ===== Modais ===== */

.modal .modal-dialog .modal-content {
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.modal .modal-dialog .modal-content .modal-header {
    border-bottom: 1px solid var(--a360-borda);
}

.modal-title {
    color: var(--a360-texto);
    font-weight: 600;
}

/* ===== Wizard (indicador de etapas do .form-wizard: cotação, pré-proposta, pré-aviso de sinistro) =====
 * Substitui o visual do neon-forms.css. A barra .steps-progress some: as linhas entre as etapas são desenhadas
 * por li::before e pintadas conforme as classes que o servidor já põe nos itens (completed, active, disabled).
 * "body" na frente para vencer os seletores do neon-forms.css.
 */

body .form-wizard {
    margin-top: 24px;
}

/* Wizard solto direto na área de conteúdo, sem painel em volta (ex.: pré-aviso de sinistro): vira superfície branca.
   O flow-root contém as colunas flutuantes dos campos das etapas. */
body section.content > form.form-wizard {
    display: flow-root;
    margin: 0 15px 20px;
    padding: 24px;
    background-color: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    box-shadow: var(--a360-sombra);
}

    body section.content > form.form-wizard .tab-content {
        display: flow-root;
    }

    body .form-wizard .steps-progress {
        display: none;
    }

    body .form-wizard > ul {
        display: flex;
        width: 100%;
        margin: 0 0 24px;
        padding: 0;
        list-style: none;
    }

        body .form-wizard > ul > li {
            display: block;
            flex: 1 1 0;
            width: auto;
            position: relative;
            text-align: center;
        }

            /* Linha entre a etapa anterior e esta */
            body .form-wizard > ul > li + li::before {
                content: "";
                position: absolute;
                top: 17px;
                left: calc(-50% + 22px);
                right: calc(50% + 22px);
                height: 2px;
                border-radius: 2px;
                background-color: var(--a360-borda);
            }

            body .form-wizard > ul > li.completed::before,
            body .form-wizard > ul > li.active::before {
                background-color: var(--a360-primaria);
            }

            body .form-wizard > ul > li > a {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 0 4px;
                color: var(--a360-texto-secundario);
                font-size: 13px;
                font-weight: 500;
                line-height: 1.3;
                text-decoration: none;
            }

                body .form-wizard > ul > li > a > span {
                    position: static;
                    display: grid;
                    place-items: center;
                    width: 36px;
                    height: 36px;
                    margin: 0;
                    border: 2px solid var(--a360-borda-campo);
                    border-radius: 50%;
                    background: var(--a360-superficie);
                    color: var(--a360-texto-secundario);
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1;
                    box-shadow: none;
                    transition: background-color .15s, border-color .15s, box-shadow .15s;
                }

            /* Etapa atual */
            body .form-wizard > ul > li.active > a,
            body .form-wizard > ul > li.current > a {
                color: var(--a360-texto);
                font-weight: 600;
            }

                body .form-wizard > ul > li.active > a > span,
                body .form-wizard > ul > li.current > a > span {
                    border-color: var(--a360-primaria);
                    background: var(--a360-primaria);
                    color: var(--a360-primaria-texto);
                    box-shadow: 0 0 0 4px var(--a360-primaria-suave);
                }

            /* Etapas concluídas: número trocado por um check */
            body .form-wizard > ul > li.completed > a {
                color: var(--a360-texto);
            }

                body .form-wizard > ul > li.completed > a > span {
                    border-color: var(--a360-primaria);
                    background: var(--a360-primaria-suave);
                    color: var(--a360-primaria);
                    font-size: 0;
                    box-shadow: none;
                }

                    body .form-wizard > ul > li.completed > a > span::after {
                        content: "\f00c";
                        font-family: FontAwesome;
                        font-size: 14px;
                    }

                    body .form-wizard > ul > li.completed > a > span > i {
                        display: none;
                    }

            /* Etapas futuras */
            body .form-wizard > ul > li.disabled > a {
                color: var(--a360-texto-secundario);
            }

                body .form-wizard > ul > li.disabled > a > span {
                    background: var(--a360-superficie);
                    color: var(--a360-texto-secundario);
                    box-shadow: none;
                }

@media (max-width: 767px) {
    /* No celular, só o círculo; o nome fica só na etapa atual */
    body .form-wizard > ul > li:not(.active) > a {
        font-size: 0;
    }

        body .form-wizard > ul > li:not(.active) > a > span {
            font-size: 14px;
        }

        body .form-wizard > ul > li.completed:not(.active) > a > span {
            font-size: 0;
        }
}

/* ===== Coberturas da cotação (Areas/Erp/Views/Cotacao/_CoberturasDetalhadas.cshtml) =====
 * Só CSS, sem mexer no markup. Tudo sob #partialCoberturas para vencer o <style> inline da partial,
 * que é carregado depois deste arquivo. */

/* Sem efeito de hover (o card subia e ganhava sombra; o do quadro de preço fica na regra do #quadroFixo) */
#partialCoberturas .card,
#partialCoberturas .card:hover {
    transform: none;
    box-shadow: var(--a360-sombra);
}

/* Barra à esquerda: cor de destaque quando a cobertura está contratada, cinza quando não */
#partialCoberturas .card {
    border-left: 4px solid var(--a360-borda);
}

    #partialCoberturas .card:has(.badge-included, .switch-modern input:checked, .badge.badge-success, select.opcaoCobertura option:checked:not([value=""])) {
        border-left-color: var(--a360-destaque);
    }

/* Cabeçalho do card. A altura mínima reserva o canto do "Ver detalhes" abaixo do controle da direita. */
#partialCoberturas .card-header-modern {
    position: relative;
    border-bottom: 0;
}

    #partialCoberturas .card-header-modern .row {
        min-height: 64px;
    }

    /* A coluna sai do posicionamento para o "Ver detalhes" se ancorar no cabeçalho, não nela */
    #partialCoberturas .card-header-modern .col-md-8 {
        position: static;
    }

#partialCoberturas .card h4 {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 15px;
    color: var(--a360-primaria);
}

/* Descrição comercial (HTML do cadastro). O <p class="card-subtitle"> não segura blocos, então os
 * <h3>/<p> da descrição caem soltos na coluna: aqui só a fonte do tema e um título interno menor. */
#partialCoberturas .card-header-modern .col-md-8 > p {
    font-family: var(--a360-fonte);
}

#partialCoberturas .card-header-modern .col-md-8 > :is(h1, h2, h3, h5, h6) {
    font-size: 17px;
}

/* Badges de informação (valor de mercado, indenização, franquia): neutros, na cor primária */
#partialCoberturas .info-badge,
#partialCoberturas .info-badge-franquia {
    background: var(--a360-primaria-suave);
    color: var(--a360-primaria);
    border: 0;
    border-radius: var(--a360-raio-campo);
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 500;
}

    #partialCoberturas .info-badge i,
    #partialCoberturas .info-badge-franquia i {
        opacity: 0.7;
    }

/* Badges de estado: só contorno. "Inclusa" e "X de Y itens" com seleção na cor primária. */
#partialCoberturas .badge-included {
    background: transparent;
    color: var(--a360-primaria);
    border: 1px solid var(--a360-primaria);
    box-shadow: none;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--a360-raio-campo);
}

#partialCoberturas .badge {
    background: transparent;
    color: var(--a360-texto-secundario);
    border: 1px solid var(--a360-borda-campo);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--a360-raio-campo);
    line-height: 1.3;
}

    #partialCoberturas .badge.badge-success {
        color: var(--a360-primaria);
        border-color: var(--a360-primaria);
    }

#partialCoberturas .btn-config-toggle,
#partialCoberturas .btn-config-filha {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--a360-raio-campo);
    box-shadow: none;
}

/* "Ver detalhes" como botão de contorno, sempre no canto inferior direito do cabeçalho */
#partialCoberturas .btn-link-modern {
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda-campo);
    border-radius: var(--a360-raio-campo);
    padding: 2px 10px;
    color: var(--a360-primaria);
    font-size: 11.5px;
    font-weight: 500;
}

    #partialCoberturas .btn-link-modern:hover {
        transform: none;
        background: var(--a360-primaria-suave);
        border-color: var(--a360-primaria);
        color: var(--a360-primaria);
        text-decoration: none;
    }

#partialCoberturas .card-badges > .btn-link-modern[data-toggle="modal"] {
    position: absolute;
    right: 20px;
    bottom: 14px;
}

/* Sem os badges de informação, a linha de badges fica vazia e não precisa de margem */
#partialCoberturas .card-badges:not(:has(.info-badge, .info-badge-franquia)) {
    margin-top: 0;
}

/* Corpo do card: faixa clara. Some quando só tem o input hidden do valor (sobrava um rodapé vazio). */
#partialCoberturas .card-body-modern {
    border-top: 1px solid var(--a360-borda);
    background: var(--a360-fundo);
    padding: 12px 20px;
}

    #partialCoberturas .card-body-modern:not(:has(> :not(input[type=hidden]))) {
        display: none !important;
    }

    /* Franquia: rótulo e select na mesma linha */
    #partialCoberturas .card-body-modern .form-group:has(.franquia-select) {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
    }

        #partialCoberturas .card-body-modern .form-group:has(.franquia-select) label {
            margin: 0;
            padding: 0;
            white-space: nowrap;
            color: var(--a360-texto-secundario);
        }

#partialCoberturas .franquia-select {
    width: auto;
    min-width: 280px;
    max-width: 360px;
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
}

/* Um botão só para avançar: o "CONTINUAR" do quadro de preço. Os dois enviam o mesmo formulário do wizard
 * (o name="action" do "Próximo" não é lido no CotacaoController), então o "Próximo" do rodapé some
 * sempre que a etapa tem o "CONTINUAR". O "Anterior" fica.
 * Com o id do form para vencer o "#rootwizard-2 .pager.wizard > li { display: block }" do NovaCotacao.cshtml. */
#rootwizard-2:has(.btn-continuar-modern) .pager.wizard > li.next {
    display: none;
}

/* "CONTINUAR" na cor primária, como o "Próximo" das outras etapas */
#partialCoberturas .btn-continuar-modern {
    background: var(--a360-primaria);
    color: var(--a360-primaria-texto);
    box-shadow: none;
    border-radius: var(--a360-raio);
}

    #partialCoberturas .btn-continuar-modern:hover {
        transform: none;
        background: var(--a360-primaria-hover);
        color: var(--a360-primaria-texto);
        box-shadow: none;
    }

    #partialCoberturas .btn-continuar-modern:focus-visible {
        outline: 2px solid var(--a360-primaria);
        outline-offset: 2px;
    }

/* Quadro de preço. Pelo id, porque no celular o ajustarCard() da partial troca .preco-fixo por .card.
 * Mesma moldura dos cards, com faixa de destaque no topo; sem o cartão com sombra dentro do quadro. */
#partialCoberturas #quadroFixo {
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-top: 4px solid var(--a360-destaque);
    border-radius: var(--a360-raio);
    padding: 0;
    box-shadow: var(--a360-sombra);
    overflow: hidden;
}

    #partialCoberturas #quadroFixo:hover {
        transform: none;
        box-shadow: var(--a360-sombra);
    }

    /* Produto como cabeçalho: rótulo pequeno e nome em uma linha */
    #partialCoberturas #quadroFixo .preco-produto-topo {
        text-align: left;
        padding: 16px 20px;
        margin: 0;
        border-bottom: 1px solid var(--a360-borda);
    }

        #partialCoberturas #quadroFixo .preco-produto-topo h5 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--a360-texto-secundario);
            margin: 0 0 4px;
        }

        #partialCoberturas #quadroFixo .preco-produto-topo h2 {
            font-size: 17px;
            line-height: 1.3;
            color: var(--a360-primaria);
            margin: 0;
        }

    #partialCoberturas #quadroFixo .preco-info-section {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: 20px 20px 16px;
    }

    #partialCoberturas #quadroFixo .preco-parcelas-titulo {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--a360-texto-secundario);
        margin: 0;
    }

    /* Preço na cor primária: o laranja sobre branco fica abaixo do contraste mínimo */
    #partialCoberturas #quadroFixo .preco-valor-principal {
        margin: 6px 0 2px;
    }

        #partialCoberturas #quadroFixo .preco-valor-principal .pricing__currency {
            font-size: 18px;
            color: var(--a360-texto-secundario);
            margin-right: 6px;
        }

        #partialCoberturas #quadroFixo .preco-valor-principal #Entidade_Cobertura_Total_Value {
            font-size: 38px;
            color: var(--a360-primaria);
            letter-spacing: -0.5px;
        }

    #partialCoberturas #quadroFixo .preco-detalhes {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--a360-borda);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        #partialCoberturas #quadroFixo .preco-detalhes .anual,
        #partialCoberturas #quadroFixo .preco-detalhes .anual small {
            margin: 0;
            font-size: 13px;
            color: var(--a360-texto-secundario);
        }

    #partialCoberturas #quadroFixo .preco-forma-pagamento {
        margin: 0;
        background: var(--a360-primaria-suave);
        color: var(--a360-primaria);
        border-radius: var(--a360-raio-campo);
        padding: 3px 10px;
        font-weight: 500;
    }

    #partialCoberturas #quadroFixo .btn-continuar-modern {
        display: block;
        width: calc(100% - 40px);
        margin: 4px 20px 20px;
        padding: 14px;
        font-size: 15px;
    }

/* Título da etapa ("Proteja-se...") mais compacto */
#partialCoberturas .price-head {
    margin-bottom: 24px !important;
}

    #partialCoberturas .price-head h1 {
        font-size: 26px;
        margin-bottom: 4px;
    }

    #partialCoberturas .price-head h4 {
        color: var(--a360-texto-secundario);
        font-weight: 500;
        font-size: 15px;
    }

@media (max-width: 767px) {
    /* Três colunas aninhadas (fieldset, #container_group e #divInclusos) somavam 45px de padding de cada lado */
    #partialCoberturas fieldset[class*="col-"],
    #partialCoberturas #container_group,
    #partialCoberturas #divInclusos,
    #partialCoberturas #scroll_preco_id {
        padding-left: 0;
        padding-right: 0;
    }

    #partialCoberturas .card-header-modern {
        padding: 14px 16px;
    }

        #partialCoberturas .card-header-modern .row {
            min-height: 0;
        }

        /* Controle (Inclusa, toggle, select, "Configurar itens") vira a última linha do cabeçalho, alinhado à esquerda */
        #partialCoberturas .card-header-modern .col-md-4 {
            margin-top: 12px;
        }

    #partialCoberturas .card-control-container {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

        #partialCoberturas .card-control-container .opcaoCobertura {
            min-width: 0;
            width: 100%;
        }

    /* Não cabe ao lado do controle: volta para o fim da linha de badges, sempre logo acima do controle */
    #partialCoberturas .card-badges > .btn-link-modern[data-toggle="modal"] {
        position: static;
    }

    #partialCoberturas .card-badges:not(:has(.info-badge, .info-badge-franquia)) {
        margin-top: 10px;
    }

    #partialCoberturas .card-body-modern {
        padding: 12px 16px;
    }

        #partialCoberturas .card-body-modern .form-group:has(.franquia-select) {
            flex-wrap: wrap;
            gap: 6px;
        }

    #partialCoberturas .franquia-select {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    #partialCoberturas .price-head h1 {
        font-size: 21px;
    }

    #partialCoberturas #quadroFixo {
        margin-top: 4px;
    }
}

/* ===== Dados do pagamento da cotação (Areas/Erp/Views/Cotacao/_DadosPagamento.cshtml) =====
 * Só CSS. Escopo na aba #tab2-8 (NovaCotacao.cshtml e Inserir.cshtml), porque o .pricing--tenzin
 * também é usado em outras partials da cotação. */

#tab2-8 .col-md-8 > fieldset > legend {
    font-size: 18px;
    font-weight: 600;
    color: var(--a360-primaria);
    margin-bottom: 14px;
}

/* Boleto: instruções agrupadas numa caixa; o "Importante" deixa de ser alerta de erro */
#tab2-8 #pnlBoletoBancario .fieldset > .row {
    margin: 0;
    background: var(--a360-fundo);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    padding: 16px 18px;
}

    #tab2-8 #pnlBoletoBancario .row.col-md-12,
    #tab2-8 #pnlBoletoBancario .fieldset > .row > .col-md-12 {
        margin: 0;
        padding: 0;
        float: none;
        width: auto;
    }

#tab2-8 #pnlBoletoBancario .alert {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--a360-superficie);
    color: var(--a360-texto);
    border: 1px solid var(--a360-borda);
    border-left: 3px solid var(--a360-alerta);
    border-radius: var(--a360-raio-campo);
}

    #tab2-8 #pnlBoletoBancario .alert p {
        margin: 0;
        font-size: 13px;
    }

    #tab2-8 #pnlBoletoBancario .alert u {
        text-decoration: none;
        color: var(--a360-alerta);
    }

#tab2-8 #pnlBoletoBancario .list-spaced {
    margin: 0;
}

    #tab2-8 #pnlBoletoBancario .list-spaced li {
        position: relative;
        padding-left: 22px;
        margin: 0 0 6px;
        font-size: 13px;
        color: var(--a360-texto);
    }

        #tab2-8 #pnlBoletoBancario .list-spaced li:last-child {
            margin-bottom: 0;
        }

        #tab2-8 #pnlBoletoBancario .list-spaced li::before {
            content: "\f00c";
            font-family: FontAwesome;
            position: absolute;
            left: 0;
            top: 1px;
            font-size: 12px;
            color: var(--a360-primaria);
        }

/* "Envia Pagamento Cliente": alinhado aos campos, rótulo e toggle na mesma faixa */
#tab2-8 #pnlLinkPagamento {
    padding-left: 0;
    padding-right: 0;
}

#tab2-8 #grpGeraLinkPagamento {
    padding: 0;
    width: auto;
    float: none;
    display: inline-block;
    margin: 4px 0 0;
}

    #tab2-8 #grpGeraLinkPagamento .form-group {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        background: var(--a360-fundo);
        border: 1px solid var(--a360-borda);
        border-radius: var(--a360-raio);
        padding: 10px 14px;
    }

    #tab2-8 #grpGeraLinkPagamento br {
        display: none;
    }

    #tab2-8 #grpGeraLinkPagamento label {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--a360-texto);
    }

    #tab2-8 #grpGeraLinkPagamento .toggle {
        height: 28px !important;
        min-width: 64px;
        border-radius: var(--a360-raio-campo);
    }

        #tab2-8 #grpGeraLinkPagamento .toggle .toggle-on,
        #tab2-8 #grpGeraLinkPagamento .toggle .toggle-off {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px 0 0;
            line-height: 1;
            font-size: 12px;
            font-weight: 600;
        }

        #tab2-8 #grpGeraLinkPagamento .toggle .toggle-off {
            padding: 0 0 0 10px;
        }

/* "Solicitar análise comercial": sempre em bloco. Desmarcada, mostra uma frase de apoio;
 * marcada, ganha fundo cinza e mostra o campo de texto. */
#tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) {
    margin: 4px 15px 0;
    width: calc(100% - 30px);
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda-campo);
    border-radius: var(--a360-raio);
    padding: 12px 16px;
}

    #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial:checked) {
        background: var(--a360-fundo);
        border-color: var(--a360-borda);
    }

    #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) > .form-group,
    #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox {
        margin: 0;
    }

        #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0;
            margin: 0;
            min-height: 0;
            cursor: pointer;
        }

            #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox label::after {
                content: "Peça agravo, desconto ou outra condição para a equipe comercial avaliar";
                font-size: 12.5px;
                font-weight: 400;
                color: var(--a360-texto-secundario);
            }

            #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox label:has(#chkAnaliseComercial:checked)::after {
                content: none;
            }

#tab2-8 #chkAnaliseComercial {
    position: static;
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--a360-primaria);
}

    #tab2-8 #chkAnaliseComercial + strong {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--a360-primaria);
    }

#tab2-8 #painelAnaliseComercial {
    margin-top: 12px;
}

    #tab2-8 #painelAnaliseComercial .form-group {
        margin: 0;
    }

    #tab2-8 #painelAnaliseComercial label {
        font-weight: 500;
        color: var(--a360-texto-secundario);
    }

    #tab2-8 #painelAnaliseComercial textarea {
        resize: vertical;
        background: var(--a360-superficie);
    }

    #tab2-8 #painelAnaliseComercial small {
        display: block;
        text-align: right;
        margin-top: 4px;
    }

/* Resumo de preço: mesmo padrão do quadro das coberturas. Os !important vencem os style inline
 * da partial e a borda laranja do .pricing--tenzin no theme.css da Transposeg. */
#tab2-8 .pricing--tenzin .pricing__item {
    background: var(--a360-superficie) !important;
    border: 1px solid var(--a360-borda);
    border-top: 4px solid var(--a360-destaque) !important;
    border-radius: var(--a360-raio);
    box-shadow: var(--a360-sombra);
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
}

    #tab2-8 .pricing--tenzin .pricing__item,
    #tab2-8 .pricing--tenzin .pricing__item p {
        font-family: var(--a360-fonte);
    }

#tab2-8 .pricing--tenzin .pricing__title {
    font-size: 17px;
    color: var(--a360-primaria);
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--a360-borda);
}

#tab2-8 .pricing--tenzin .pricing__price_details {
    font-size: 13px !important;
    font-weight: 400;
    padding: 12px 20px !important;
    margin: 0 !important;
}

    #tab2-8 .pricing--tenzin .pricing__price_details > * {
        font-size: 13px !important;
    }

    /* Cota de participação, quando o produto cobra (é o único bloco de detalhes com <p>) */
    #tab2-8 .pricing--tenzin .pricing__price_details:has(> p) {
        background: var(--a360-fundo);
        border-bottom: 1px solid var(--a360-borda) !important;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 4px;
    }

        #tab2-8 .pricing--tenzin .pricing__price_details:has(> p) > p {
            flex-basis: 100%;
            margin: 0 !important;
            padding: 0 !important;
            color: var(--a360-texto-secundario) !important;
            font-size: 12.5px !important;
        }

            #tab2-8 .pricing--tenzin .pricing__price_details:has(> p) > p:last-child {
                margin-top: 4px !important;
            }

        #tab2-8 .pricing--tenzin .pricing__price_details:has(> p) > span:first-of-type,
        #tab2-8 .pricing--tenzin .pricing__price_details:has(> p) > div {
            font-weight: 600;
            color: var(--a360-texto);
        }

/* "12 x de R$" e o valor da parcela na mesma linha de base (eram floats) */
#tab2-8 .pricing--tenzin .pricing__price {
    border: 0 !important;
    padding: 18px 20px 4px !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    font-size: 15px !important;
}

    #tab2-8 .pricing--tenzin .pricing__price > p {
        flex-basis: 100%;
        margin: 0 0 2px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--a360-texto-secundario);
    }

    #tab2-8 .pricing--tenzin .pricing__price > div,
    #tab2-8 .pricing--tenzin .pricing__price > span {
        float: none !important;
        color: var(--a360-texto-secundario);
        font-weight: 500;
    }

#tab2-8 .pricing--tenzin #Entidade_Cobertura_Valor_Parcela_Value {
    font-size: 38px;
    font-weight: 700;
    color: var(--a360-primaria) !important;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

/* Total, logo abaixo do valor da parcela */
#tab2-8 .pricing--tenzin .pricing__price + .pricing__price_details {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0 20px 14px !important;
    color: var(--a360-texto-secundario);
}

    #tab2-8 .pricing--tenzin .pricing__price + .pricing__price_details > * {
        float: none !important;
    }

#tab2-8 .pricing--tenzin .pricing__item > a,
#tab2-8 .pricing--tenzin .pricing__item > div:not([class]) {
    text-align: center;
}

#tab2-8 .pricing--tenzin .pricing__sentence {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--a360-texto-secundario) !important;
    border: 0 !important;
    border-top: 1px solid var(--a360-borda) !important;
    margin: 12px 0 0;
    padding: 12px 20px !important;
}

/* "Contratar" na cor primária (era verde) e "Imprimir Cotação" como botão de contorno (era azul) */
#tab2-8 .pricing--tenzin #btnContratar {
    margin: 4px 20px 0;
    width: calc(100% - 40px);
    background: var(--a360-primaria);
    border-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
    border-radius: var(--a360-raio);
    box-shadow: none;
    font-weight: 600;
}

    #tab2-8 .pricing--tenzin #btnContratar:hover {
        background: var(--a360-primaria-hover);
        border-color: var(--a360-primaria-hover);
    }

#tab2-8 .pricing--tenzin #btnImprimirCotacao {
    margin: 8px 20px 20px !important;
    width: calc(100% - 40px);
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda-campo);
    color: var(--a360-primaria);
    border-radius: var(--a360-raio);
    box-shadow: none;
    font-size: 15px;
}

    #tab2-8 .pricing--tenzin #btnImprimirCotacao:hover {
        background: var(--a360-primaria-suave);
        border-color: var(--a360-primaria);
    }

@media (max-width: 767px) {
    /* Sem a margem de 1em do .pricing__item: o resumo fica com a largura dos blocos da esquerda */
    #tab2-8 .pricing--tenzin .pricing__item {
        margin: 16px 0 0;
    }

    /* A frase de apoio da análise comercial desce para a linha de baixo */
    #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox label {
        flex-wrap: wrap;
        row-gap: 4px;
    }

        #tab2-8 .col-md-12:has(> .form-group #chkAnaliseComercial) .checkbox label::after {
            flex-basis: 100%;
            padding-left: 26px;
        }
}

/* ===== Conclusão da cotação (Areas/Erp/Views/Cotacao/_ConcluirCotacao.cshtml) =====
 * Faixa com a situação da proposta e resumo da contratação. Os tons repetem os das etiquetas de status (.a360-status--*). */
.a360-conclusao {
    max-width: 860px;
    margin: 8px auto 24px;
    font-family: var(--a360-fonte);
    text-align: left;
}

    .a360-conclusao p,
    .a360-conclusao dt,
    .a360-conclusao dd {
        font-family: var(--a360-fonte);
    }

.a360-conclusao-faixa {
    --a360-conclusao-tom: #0284C7;
    --a360-conclusao-tom-texto: #075985;
    --a360-conclusao-fundo: #F0F9FF;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    border: 1px solid var(--a360-borda);
    border-left: 4px solid var(--a360-conclusao-tom);
    border-radius: var(--a360-raio);
    background: var(--a360-conclusao-fundo);
}

.a360-conclusao-faixa--alerta {
    --a360-conclusao-tom: #D97706;
    --a360-conclusao-tom-texto: #92400E;
    --a360-conclusao-fundo: #FFFBEB;
}

.a360-conclusao-faixa--sucesso {
    --a360-conclusao-tom: #16A34A;
    --a360-conclusao-tom-texto: #166534;
    --a360-conclusao-fundo: #F0FDF4;
}

.a360-conclusao-faixa--aberto {
    --a360-conclusao-tom: #7C3AED;
    --a360-conclusao-tom-texto: #5B21B6;
    --a360-conclusao-fundo: #F5F3FF;
}

.a360-conclusao-icone {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--a360-conclusao-tom);
    color: #FFFFFF;
    font-size: 20px;
}

.a360-conclusao-texto h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--a360-texto);
    margin: 0 0 6px;
}

.a360-conclusao-texto p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--a360-texto);
    margin: 0;
}

    .a360-conclusao-texto p + p {
        margin-top: 6px;
    }

    .a360-conclusao-texto p.a360-conclusao-rotulo {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--a360-conclusao-tom-texto);
        margin: 0 0 2px;
    }

.a360-conclusao-acao {
    margin-top: 12px;
}

.a360-conclusao-bilhetes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

    .a360-conclusao-bilhetes > div {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }

/* Resumo: contratação à esquerda, pagamento à direita */
.a360-conclusao-resumo {
    margin-top: 20px;
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    box-shadow: var(--a360-sombra);
    overflow: hidden;
}

.a360-conclusao-resumo-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--a360-borda);
}

    .a360-conclusao-resumo-cabecalho h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--a360-primaria);
    }

.a360-conclusao-resumo-corpo {
    display: grid;
    grid-template-columns: 1fr 280px;
}

    .a360-conclusao-resumo-corpo > section {
        padding: 16px 20px;
    }

    .a360-conclusao-resumo-corpo h4 {
        margin: 0 0 10px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--a360-texto-secundario);
    }

    .a360-conclusao-resumo-corpo dl {
        margin: 0;
    }

        .a360-conclusao-resumo-corpo dl > div {
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 12px;
            padding: 8px 0;
            border-top: 1px solid var(--a360-borda);
        }

            .a360-conclusao-resumo-corpo dl > div:first-child {
                border-top: 0;
                padding-top: 0;
            }

    .a360-conclusao-resumo-corpo dt {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        color: var(--a360-texto-secundario);
    }

    .a360-conclusao-resumo-corpo dd {
        margin: 0;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--a360-texto);
    }

        .a360-conclusao-resumo-corpo dd small {
            margin-left: 6px;
            font-size: 12px;
            color: var(--a360-texto-secundario);
        }

/* Pagamento: parcela em destaque e valores alinhados à direita */
.a360-conclusao-pagamento {
    border-left: 1px solid var(--a360-borda);
    background: var(--a360-fundo);
}

    .a360-conclusao-pagamento p.a360-conclusao-parcela {
        margin: 0;
        font-size: 13px;
        color: var(--a360-texto-secundario);
    }

        .a360-conclusao-pagamento p.a360-conclusao-parcela strong {
            display: block;
            font-size: 28px;
            line-height: 1.2;
            font-weight: 700;
            color: var(--a360-primaria);
        }

    .a360-conclusao-resumo-corpo .a360-conclusao-pagamento dl {
        margin-top: 12px;
    }

        .a360-conclusao-resumo-corpo .a360-conclusao-pagamento dl > div {
            grid-template-columns: 1fr auto;
        }

            .a360-conclusao-resumo-corpo .a360-conclusao-pagamento dl > div:first-child {
                border-top: 1px solid var(--a360-borda);
                padding-top: 8px;
            }

    .a360-conclusao-pagamento dd {
        text-align: right;
    }

@media (max-width: 767px) {
    .a360-conclusao-faixa {
        padding: 16px;
        gap: 12px;
    }

    .a360-conclusao-icone {
        flex-basis: 36px;
        height: 36px;
        font-size: 16px;
    }

    .a360-conclusao-texto h2 {
        font-size: 18px;
    }

    .a360-conclusao-resumo-corpo {
        grid-template-columns: 1fr;
    }

    .a360-conclusao-pagamento {
        border-left: 0;
        border-top: 1px solid var(--a360-borda);
    }

    .a360-conclusao-resumo-corpo dl > div {
        grid-template-columns: 96px 1fr;
    }

    .a360-conclusao-resumo-corpo dd small {
        display: block;
        margin-left: 0;
    }
}

/* ===== Loading (Loading/ShowLoading do Views/Shared/_Layout.cshtml) =====
 * Véu branco sobre a tela com o símbolo do Apólice360 girando (o arco e o ponto giram, o quadrado fica parado).
 * Cores fixas da marca, como na tela de login, porque é o símbolo do produto. Substitui o spinner "wave" do
 * css/spinners/default.css. */
.a360-loading {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: a360-loading-entrada 0.15s ease-out;
}

.a360-loading-simbolo {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 8px 18px rgba(30, 58, 95, 0.25));
    animation: a360-loading-respira 1.6s ease-in-out infinite;
}

    .a360-loading-simbolo rect {
        fill: #1E3A5F;
    }

    .a360-loading-simbolo path {
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 4;
        stroke-linecap: round;
    }

    .a360-loading-simbolo circle {
        fill: #F2B33D;
    }

/* O arco tem centro em (24, 24), o meio do quadrado */
.a360-loading-arco {
    transform-origin: 24px 24px;
    animation: a360-loading-giro 1.1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.a360-loading .a360-loading-mensagem {
    margin: 0;
    max-width: 480px;
    font-family: var(--a360-fonte);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    color: #1F2937;
}

@keyframes a360-loading-giro {
    to {
        transform: rotate(360deg);
    }
}

@keyframes a360-loading-respira {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes a360-loading-entrada {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a360-loading,
    .a360-loading-simbolo {
        animation: none;
    }

    .a360-loading-arco {
        animation-duration: 2.5s;
    }
}

/* ===== Seleção e foco ===== */

/* Cor forte de propósito: a primaria-suave é o fundo da linha em hover nas grids (.table-hover)
   e deixava o texto selecionado invisível, parecendo que não dava para selecionar e copiar */
::selection {
    background-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

/* ===== Tela de login (Views/Account/Login.cshtml) =====
 * O painel da esquerda é a marca do produto: cores e fonte fixas do Apólice360, que os clientes
 * não redefinem (por isso não usa os tokens --a360-*). O formulário usa os tokens do cliente.
 * Abaixo de 992px o painel some e a marca do produto aparece no topo do formulário. */

.a360-login {
    --apolice360-marinho: #1E3A5F;
    --apolice360-marinho-escuro: #101D30;
    --apolice360-ambar: #F2B33D;
    --apolice360-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.a360-login {
    display: flex;
    min-height: 100vh;
    background-color: var(--a360-superficie);
}

    /* O style.css do template põe Raleway nos parágrafos */
    .a360-login p {
        font-family: var(--a360-fonte);
    }

.a360-login-marca {
    position: relative;
    display: flex;
    flex: 0 0 52%;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    overflow: hidden;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--apolice360-marinho) 0%, var(--apolice360-marinho-escuro) 100%);
}

    /* Os temas dos clientes trocam a fonte dos títulos; no painel vale a do produto (ícones fora) */
    .a360-login-marca,
    .a360-login-marca *:not(.fa) {
        font-family: var(--apolice360-fonte);
    }

    /* Círculos decorativos em transparência, para o painel não ficar chapado */
    .a360-login-marca::before,
    .a360-login-marca::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .a360-login-marca::before {
        width: 520px;
        height: 520px;
        right: -180px;
        top: -160px;
        border: 70px solid rgba(255, 255, 255, 0.05);
    }

    .a360-login-marca::after {
        width: 300px;
        height: 300px;
        left: -120px;
        bottom: -110px;
        background: rgba(255, 255, 255, 0.04);
    }

    .a360-login-marca > * {
        position: relative;
        z-index: 1;
    }

/* Símbolo e nome do produto */
.a360-login-produto {
    display: flex;
    align-items: center;
    gap: 14px;
}

.a360-login-simbolo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

    .a360-login-simbolo rect {
        fill: var(--apolice360-marinho);
    }

    .a360-login-simbolo path {
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 4;
        stroke-linecap: round;
    }

    .a360-login-simbolo circle {
        fill: var(--apolice360-ambar);
    }

/* No painel escuro, o quadrado do símbolo ganha contorno para não sumir no fundo */
.a360-login-marca .a360-login-simbolo rect {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}

.a360-login-produto-nome {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

    .a360-login-produto-nome span {
        color: var(--apolice360-ambar);
    }

.a360-login-produto-descricao {
    margin-top: 3px;
    font-size: 13px;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

/* Versão do formulário (telas pequenas): fundo branco, nome em marinho */
.a360-login-produto--movel {
    display: none;
    justify-content: center;
    margin-bottom: 28px;
    font-family: var(--apolice360-fonte);
}

    .a360-login-produto--movel .a360-login-produto-nome {
        font-family: var(--apolice360-fonte);
        color: var(--apolice360-marinho);
    }

    .a360-login-produto--movel .a360-login-produto-nome span {
        color: #D99A1E;
    }

.a360-login-marca-conteudo {
    max-width: 460px;
}

    .a360-login-marca-conteudo h2 {
        margin: 0 0 16px;
        font-size: 34px;
        font-weight: 700;
        line-height: 1.2;
        color: inherit;
    }

    .a360-login-marca-conteudo p {
        margin: 0 0 32px;
        font-size: 16px;
        line-height: 1.6;
        opacity: 0.85;
    }

    .a360-login-marca-conteudo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .a360-login-marca-conteudo li {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        font-size: 15px;
    }

        .a360-login-marca-conteudo li .fa {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 38px;
            height: 38px;
            border-radius: 10px;
            font-size: 16px;
            color: var(--apolice360-ambar);
            background: rgba(255, 255, 255, 0.10);
        }

.a360-login-marca-rodape {
    font-size: 13px;
    opacity: 0.7;
}

.a360-login-formulario {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.a360-login-caixa {
    width: 100%;
    max-width: 380px;
}

.a360-login-caixa h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: var(--a360-texto);
}

.a360-login-subtitulo {
    margin: 0 0 20px;
    color: var(--a360-texto-secundario);
}

/* Faixa "Ambiente" com o logo do cliente: o cliente é o contexto do acesso, não o dono do sistema */
.a360-login-ambiente {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 10px 14px;
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    background-color: var(--a360-fundo);
}

    .a360-login-ambiente span {
        padding-right: 14px;
        border-right: 1px solid var(--a360-borda);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--a360-texto-secundario);
    }

    .a360-login-ambiente img {
        max-width: 160px;
        max-height: 34px;
    }

.a360-login-caixa label {
    font-weight: 600;
    padding-left: 0;
    color: var(--a360-texto);
}

/* Campo com ícone à esquerda (e o botão de ver a senha à direita) */
.a360-login-campo {
    position: relative;
}

    .a360-login-campo > .fa {
        position: absolute;
        left: 14px;
        top: 15px;
        color: var(--a360-texto-secundario);
        pointer-events: none;
    }

    body .a360-login-campo .form-control {
        height: 46px;
        padding-left: 40px;
        padding-right: 44px;
        font-size: 15px;
    }

    /* Mensagem do jQuery Validate abaixo do campo */
    .a360-login-campo label.error {
        display: block;
        margin: 6px 0 0;
        font-size: 13px;
        font-weight: 400;
        color: var(--a360-erro);
    }

.a360-login-ver-senha {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--a360-raio-campo);
    background: transparent;
    color: var(--a360-texto-secundario);
}

    .a360-login-ver-senha:hover,
    .a360-login-ver-senha:focus {
        color: var(--a360-primaria);
        background: var(--a360-primaria-suave);
        outline: none;
    }

.a360-login-capslock {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    color: var(--a360-alerta);
}

.a360-login-lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 24px;
}

    .a360-login-lembrar input,
    .a360-login-lembrar label {
        margin: 0;
        cursor: pointer;
    }

    .a360-login-lembrar label {
        font-weight: 400;
    }

body .a360-login-caixa .btn-lg {
    height: 48px;
    font-weight: 600;
}

.a360-login-erro ul {
    margin: 0 0 20px;
    padding: 10px 14px;
    list-style: none;
    border-radius: var(--a360-raio-campo);
    color: var(--a360-erro);
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.a360-login-erro.validation-summary-valid {
    display: none;
}

.a360-login-rodape {
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--a360-texto-secundario);
}

@media (max-width: 991px) {
    .a360-login-marca {
        display: none;
    }

    .a360-login-produto--movel {
        display: flex;
    }

    .a360-login-caixa h1,
    .a360-login-subtitulo {
        text-align: center;
    }
}

/* ==========================================================================
   Pesquisa de satisfação (spec 45): janela para o usuário e telas do backoffice
   ========================================================================== */

.a360-pesquisa-corpo {
    max-height: 65vh;
    overflow-y: auto;
    position: relative;
}

.a360-pesquisa-introducao {
    color: var(--a360-texto-secundario);
    margin-bottom: 16px;
}

.a360-pesquisa-pergunta {
    margin-bottom: 20px;
}

.a360-pesquisa-enunciado {
    color: var(--a360-texto);
    font-weight: 600;
    margin-bottom: 8px;
}

.a360-pesquisa-obrigatoria,
.a360-pesquisa-erro {
    color: var(--a360-erro);
}

.a360-pesquisa-erro {
    font-size: 13px;
    margin-top: 4px;
}

.a360-pesquisa-erro:empty {
    display: none;
}

.a360-pesquisa-pergunta--erro textarea {
    border-color: var(--a360-erro);
}

.a360-pesquisa-escala {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.a360-pesquisa-nota {
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda-campo);
    border-radius: var(--a360-raio-campo);
    color: var(--a360-texto);
    cursor: pointer;
    flex: 1 1 36px;
    font-weight: 600;
    max-width: 48px;
    min-height: 38px;
    padding: 0;
}

.a360-pesquisa-nota:hover {
    background: var(--a360-primaria-suave);
}

.a360-pesquisa-nota.ativa,
.a360-pesquisa-nota.ativa:hover {
    background: var(--a360-primaria);
    border-color: var(--a360-primaria);
    color: var(--a360-primaria-texto);
}

.a360-pesquisa-rotulos {
    color: var(--a360-texto-secundario);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    margin-top: 6px;
}

.a360-pesquisa-contador {
    color: var(--a360-texto-secundario);
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}

@media (max-width: 767px) {
    .a360-pesquisa-nota {
        flex-basis: 16%;
        max-width: none;
    }
}

.a360-pesquisa-publico {
    margin: 12px 0;
}

.a360-pesquisa-publico .label {
    display: inline-block;
    margin-right: 4px;
}

.a360-pesquisa-publico-topo {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.a360-pesquisa-publico-lista {
    column-gap: 24px;
    columns: 3 220px;
}

.a360-pesquisa-publico-lista .checkbox {
    break-inside: avoid;
    margin-top: 0;
}

.a360-pesquisa-acoes {
    margin-bottom: 12px;
}

.a360-pesquisa-abas {
    margin-top: 8px;
}

.a360-pesquisa-aba {
    padding-top: 16px;
}

.a360-pesquisa-linha-acoes {
    white-space: nowrap;
}

.a360-pesquisa-linha-acoes form {
    display: inline-block;
}

.a360-pesquisa-cartoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.a360-pesquisa-cartao {
    background: var(--a360-superficie);
    border: 1px solid var(--a360-borda);
    border-radius: var(--a360-raio);
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 12px 16px;
}

.a360-pesquisa-cartao-valor {
    color: var(--a360-primaria);
    font-size: 20px;
    font-weight: 700;
}

.a360-pesquisa-cartao-rotulo {
    color: var(--a360-texto-secundario);
    font-size: 12px;
}

.a360-pesquisa-resultado {
    border-top: 1px solid var(--a360-borda);
    padding: 12px 0;
}

.a360-pesquisa-resultado h5 {
    font-weight: 600;
    margin: 0 0 4px;
}

.a360-pesquisa-barra {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.a360-pesquisa-barra-rotulo {
    flex: 0 0 200px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.a360-pesquisa-barra-trilho {
    background: var(--a360-fundo);
    border-radius: 4px;
    flex: 1 1 auto;
    height: 14px;
    overflow: hidden;
}

.a360-pesquisa-barra-valor {
    background: var(--a360-primaria);
    display: block;
    height: 100%;
}

.a360-pesquisa-barra-total {
    color: var(--a360-texto-secundario);
    flex: 0 0 90px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .a360-pesquisa-barra-rotulo {
        flex-basis: 90px;
    }
}

.a360-pesquisa-textos {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.a360-pesquisa-textos li {
    border-left: 3px solid var(--a360-borda-campo);
    margin-bottom: 6px;
    padding: 4px 10px;
    white-space: pre-wrap;
}