/*
 * Identidade Levacel nos painéis (docs/identidade/IDENTIDADE.md).
 * Sem modo escuro, sem gradientes, sem texturas de fundo. Amarelo só em botões, títulos e detalhes.
 */

:root {
    --levacel-cedula: #1D6B45;
    --levacel-cedula-escura: #155234;
    --levacel-cedula-funda: #10432A;
    --levacel-amarela: #C98A16;
    --levacel-amarela-escura: #A9720F;
    --levacel-papel: #E3E9E1;
    --levacel-papel-claro: #EDF1EA;
    --levacel-nevoa: #BFC9BC;
    --levacel-tinta: #1B1A17;
    --levacel-titulo: 'Fjalla One', 'Arial Narrow', sans-serif;
    --levacel-rotulo: 'Courier Prime', 'Courier New', monospace;
    --levacel-texto-suave: #55524C;

    /* Escala de espaçamento (base 4px). Usar só estes valores. */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-8: 3rem;
    --raio: 0.75rem;
}

/* ---------- Base ------------------------------------------------------- */

.fi-body {
    background-color: var(--levacel-papel);
    color: var(--levacel-tinta);
}

.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.levacel-titulo {
    font-family: var(--levacel-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--levacel-tinta);
}

.fi-header-heading {
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
    line-height: 1.05;
}

/* Título de seção dentro da página: rótulo Courier com linha fina (hierarquia abaixo do título da página). */
.levacel-secao {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    font-family: var(--levacel-rotulo);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--levacel-cedula-escura);
}

.levacel-secao::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--levacel-nevoa);
}

.fi-section,
.fi-ta-ctn,
.fi-wi-widget > .fi-section {
    background-color: var(--levacel-papel-claro);
}

.fi-section,
.fi-ta-ctn {
    --tw-ring-color: var(--levacel-nevoa);
    box-shadow: none;
    border: 1px solid var(--levacel-nevoa);
}

.fi-breadcrumbs {
    font-family: var(--levacel-rotulo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}

/* Título de tabela nunca quebra no meio da palavra (regra 9). */
.fi-ta-header-cell,
.fi-ta-header-cell-label {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

/* ---------- Barra do topo: Cédula funda com faixa amarela -------------- */

/* Regra 5: nada de barra fixa cobrindo o conteúdo. */
.fi-topbar-ctn {
    position: static;
}

.fi-topbar {
    background-color: var(--levacel-cedula-funda);
    border-bottom: 5px solid var(--levacel-amarela);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    color: var(--levacel-papel);
}

.fi-topbar .fi-logo {
    height: 2rem;
    width: auto;
}

.fi-topbar-start {
    margin-inline-end: var(--esp-5);
}

.fi-topbar-nav-groups {
    gap: var(--esp-1);
}

.fi-topbar-item-btn {
    border-radius: 0;
    color: var(--levacel-papel);
    background: transparent;
    padding: var(--esp-2) var(--esp-3) calc(var(--esp-2) - 3px);
    border-bottom: 3px solid transparent;
}

.fi-topbar-item-btn .fi-topbar-item-icon,
.fi-topbar-item-btn .fi-topbar-group-toggle-icon {
    color: var(--levacel-nevoa);
}

.fi-topbar-item-label {
    color: var(--levacel-papel);
    font-weight: 500;
}

.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
    background: rgb(255 255 255 / 0.06);
}

/* Item ativo: sublinhado amarelo. */
.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background: transparent;
    border-bottom-color: var(--levacel-amarela);
}

.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item.fi-active .fi-topbar-item-icon {
    color: #FFFFFF;
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn .fi-icon {
    color: var(--levacel-papel);
}

.fi-topbar .fi-tenant-menu-trigger,
.fi-topbar .fi-tenant-menu-trigger span,
.fi-topbar .fi-tenant-menu-trigger .fi-icon {
    color: var(--levacel-papel);
}

.fi-topbar .fi-tenant-menu-trigger:hover {
    background: rgb(255 255 255 / 0.06);
}

.fi-topbar .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.08);
    --tw-ring-color: rgb(255 255 255 / 0.18);
}

.fi-topbar .fi-input-wrp input {
    color: var(--levacel-papel);
}

.fi-topbar .fi-input-wrp input::placeholder,
.fi-topbar .fi-input-wrp .fi-icon {
    color: var(--levacel-nevoa);
}

/* Menu lateral (celular): também verde, para a logo fundo-verde. */
.fi-sidebar {
    background-color: var(--levacel-cedula-funda);
    border: 0;
    box-shadow: none;
}

/* Fechado, o menu sai inteiro da tela (sem fio verde na borda por arredondamento de pixel). */
.fi-sidebar:not(.fi-sidebar-open) {
    --tw-translate-x: calc(-100% - 4px);
}

.fi-sidebar-header {
    background-color: var(--levacel-cedula-funda);
    border-bottom: 5px solid var(--levacel-amarela);
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-tenant-menu-trigger {
    color: var(--levacel-papel);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: transparent;
    box-shadow: inset 4px 0 0 var(--levacel-amarela);
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #FFFFFF;
}

/* ---------- Botões ----------------------------------------------------- */

/* Principal: pílula Via Amarela, Fjalla One, texto Tinta. */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--levacel-amarela);
    color: var(--levacel-tinta);
    border-radius: 9999px;
    font-family: var(--levacel-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-inline: 1.25rem;
    box-shadow: none;
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: var(--levacel-tinta);
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-primary:not(.fi-outlined):focus-visible {
    background-color: var(--levacel-amarela-escura);
    color: var(--levacel-tinta);
}

/* Secundário: pílula com contorno Cédula. (Botão cinza do Filament não leva classe de cor.) */
.fi-btn:not(.fi-color),
.fi-btn.fi-color-gray,
.fi-btn.fi-color-primary.fi-outlined {
    background-color: transparent;
    color: var(--levacel-cedula-escura);
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1.5px var(--levacel-cedula);
    --tw-ring-shadow: 0 0 #0000;
    padding-inline: 1.1rem;
}

.fi-btn:not(.fi-color) .fi-icon,
.fi-btn.fi-color-gray .fi-icon {
    color: var(--levacel-cedula);
}

.fi-btn:not(.fi-color):hover,
.fi-btn:not(.fi-color):focus-visible,
.fi-btn.fi-color-gray:hover,
.fi-btn.fi-color-gray:focus-visible {
    background-color: rgb(29 107 69 / 0.08);
}

/* Link com seta, alinhado à direita (regra 2). */
.levacel-link-seta {
    display: block;
    margin-inline-start: auto;
    text-align: end;
    color: var(--levacel-cedula-escura);
    font-weight: 600;
    text-decoration: none;
}

.levacel-link-seta:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Passo a passo ---------------------------------------------- */

.fi-sc-wizard-header {
    background-color: var(--levacel-papel-claro);
    border: 1px solid var(--levacel-nevoa);
    border-radius: 0.75rem;
}

.fi-sc-wizard-header-step-label {
    font-family: var(--levacel-rotulo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

.levacel-revisao {
    display: grid;
    gap: 1rem;
}

.levacel-revisao__bloco {
    border: 1px solid var(--levacel-nevoa);
    border-radius: 0.75rem;
    background: #FFFFFF;
    padding: 1rem 1.25rem;
}

.levacel-revisao__titulo {
    font-family: var(--levacel-rotulo);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--levacel-cedula);
    margin-bottom: 0.5rem;
}

.levacel-revisao__linhas {
    display: grid;
    gap: 0.35rem 1.5rem;
    grid-template-columns: minmax(8rem, max-content) 1fr;
}

.levacel-revisao__linhas dt {
    color: #57534E;
}

.levacel-revisao__linhas dd {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.levacel-revisao__bloco .levacel-link-seta {
    margin-top: 0.75rem;
    border-top: 1px solid var(--levacel-nevoa);
    padding-top: 0.5rem;
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

@media (max-width: 480px) {
    .levacel-revisao__linhas {
        grid-template-columns: 1fr;
    }

    .levacel-revisao__linhas dd {
        margin-bottom: 0.4rem;
    }
}

/* ---------- Cartões tipo carnê ----------------------------------------- */

.levacel-carnes {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.levacel-carne {
    display: flex;
    flex-direction: column;
    background-color: var(--levacel-papel-claro);
    border: 1px solid var(--levacel-nevoa);
    border-radius: var(--raio);
    overflow: hidden;
}

.levacel-carne__topo {
    background-color: var(--levacel-cedula);
    color: var(--levacel-papel);
    padding: var(--esp-2) var(--esp-5);
    font-family: var(--levacel-rotulo);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.levacel-carne__corpo {
    padding: var(--esp-5) var(--esp-5) var(--esp-4);
    flex: 1;
}

.levacel-carne__valor {
    font-family: var(--levacel-titulo);
    font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem);
    line-height: 1;
    color: var(--levacel-tinta);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.levacel-carne__valor--alerta {
    color: #B42318;
}

.levacel-carne__detalhe {
    margin-top: var(--esp-2);
    color: var(--levacel-texto-suave);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Serrilha discreta: o picote do carnê, antes do rodapé (elemento oficial, cor Névoa). */
.levacel-carne__serrilha {
    height: 6px;
    margin-inline: var(--esp-5);
    background-image: radial-gradient(circle, var(--levacel-nevoa) 2px, transparent 2.5px);
    background-size: 12px 6px;
    background-repeat: space no-repeat;
}

.levacel-carne__rodape {
    display: flex;
    align-items: center;
    height: 3.25rem;
    padding: 0 var(--esp-5);
    font-size: 0.9rem;
}

/* ---------- Telas de acesso: placa verde + formulário ------------------ */

.fi-simple-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(22rem, 46%) 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100dvh;
    background-color: var(--levacel-papel);
}

.levacel-placa {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--esp-8);
    padding: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1rem + 4vw, 5.5rem);
    background-color: var(--levacel-cedula);
    color: var(--levacel-papel);
    /* Faixa amarela vertical, como a fachada da loja. */
    border-inline-end: 10px solid var(--levacel-amarela);
    container-type: inline-size;
}

.levacel-placa__logo--vertical {
    display: block;
    width: clamp(7rem, 20cqi, 10rem);
    height: auto;
}

.levacel-placa__logo--horizontal {
    display: none;
}

.levacel-placa__mensagem {
    display: grid;
    gap: var(--esp-5);
    max-width: 40rem;
}

.levacel-placa__slogan {
    display: grid;
    font-family: var(--levacel-titulo);
    /* Acompanha a largura da placa; cada linha do slogan fica inteira. */
    font-size: clamp(2.5rem, 13cqi, 5.5rem);
    line-height: 0.98;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.levacel-placa__destaque {
    color: var(--levacel-amarela);
}

.levacel-placa__apoio {
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
    line-height: 1.5;
    color: var(--levacel-papel);
    opacity: 0.88;
}

.levacel-placa__rodape {
    display: grid;
    gap: var(--esp-3);
}

.levacel-placa__serrilha {
    height: 6px;
    max-width: 18rem;
    background-image: radial-gradient(circle, rgb(227 233 225 / 0.45) 2px, transparent 2.5px);
    background-size: 12px 6px;
    background-repeat: space no-repeat;
}

.levacel-placa__painel {
    font-family: var(--levacel-rotulo);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--levacel-nevoa);
}

.fi-simple-layout > .fi-simple-main-ctn {
    grid-row: 1;
    grid-column: 2;
    padding: var(--esp-8) clamp(1.5rem, 1rem + 3vw, 4rem);
}

.fi-simple-layout-header {
    position: absolute;
    inset-inline-end: var(--esp-4);
    top: var(--esp-4);
}

/* Formulário direto sobre o Papel: sem caixa, com espaço para respirar. */
.fi-simple-main {
    width: 100%;
    max-width: 26rem;
    margin-block: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-simple-main .fi-logo {
    display: none;
}

.fi-simple-header {
    align-items: flex-start;
    text-align: start;
    margin-bottom: var(--esp-6);
}

.fi-simple-header-heading {
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    line-height: 1.05;
}

.fi-simple-header-subheading {
    margin-top: var(--esp-2);
    font-size: 1rem;
    color: var(--levacel-texto-suave);
    text-align: start;
}

.fi-simple-main .fi-fo-field-label-content,
.fi-simple-main .fi-fo-field-label {
    font-weight: 600;
    color: var(--levacel-tinta);
}

.fi-simple-main .fi-input-wrp {
    background-color: #FFFFFF;
    border-radius: 0.625rem;
    --tw-ring-color: var(--levacel-nevoa);
}

.fi-simple-main .fi-input {
    min-height: 3rem;
    font-size: 1rem;
}

.fi-simple-main .fi-btn.fi-color-primary {
    width: 100%;
    min-height: 3rem;
    font-size: 1.05rem;
}

.fi-simple-main .fi-otp-input-ctn input,
.fi-simple-main .fi-fo-one-time-code-input input {
    background-color: #FFFFFF;
}

.levacel-login__ajuda {
    display: block;
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--levacel-nevoa);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--levacel-texto-suave);
}

/* Celular e tablet em pé: a placa vira faixa no topo. */
@media (max-width: 899px) {
    .fi-simple-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .fi-simple-layout > .fi-simple-main-ctn {
        grid-row: 2;
        grid-column: 1;
        align-items: flex-start;
        padding: var(--esp-6) var(--esp-5) var(--esp-8);
    }

    .levacel-placa {
        grid-row: 1;
        gap: var(--esp-3);
        padding: var(--esp-5) var(--esp-5) var(--esp-5);
        border-inline-end: 0;
        border-bottom: 6px solid var(--levacel-amarela);
    }

    .levacel-placa__logo--vertical,
    .levacel-placa__apoio,
    .levacel-placa__rodape {
        display: none;
    }

    .levacel-placa__logo--horizontal {
        display: block;
        width: 8.5rem;
        height: auto;
    }

    .levacel-placa__mensagem {
        gap: 0;
    }

    .levacel-placa__slogan {
        display: block;
        white-space: normal;
        font-size: clamp(1.35rem, 1rem + 1.6vw, 1.75rem);
        line-height: 1.15;
    }

    .fi-simple-main {
        max-width: 28rem;
    }

    .fi-simple-header {
        margin-bottom: var(--esp-5);
    }

    .fi-simple-layout-header {
        top: var(--esp-2);
        inset-inline-end: var(--esp-2);
    }
}