/* =========================================
   CALCULADORA PRO
   INTERFACE PRINCIPAL
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #080b0f;
    --sidebar: #0d1117;
    --panel: #11161d;
    --panel-2: #151b23;
    --border: #242c36;

    --text: #f5f7fa;
    --muted: #858e9b;

    --orange: #ff9f1c;
    --orange-soft: rgba(255, 159, 28, 0.12);

    --green: #35d07f;
    --green-soft: rgba(53, 208, 127, 0.12);

    --red: #ff5c5c;
    --yellow: #ffc857;

    --radius: 16px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);

    min-height: 100vh;
}


/* =========================================
   LAYOUT
========================================= */

.app-layout {
    display: flex;
    min-height: 100vh;
}


/* =========================================
   MENU LATERAL
========================================= */

.sidebar {
    width: 245px;
    min-height: 100vh;

    background: var(--sidebar);

    border-right: 1px solid var(--border);

    padding: 25px 18px;

    display: flex;
    flex-direction: column;

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;
}


/* LOGO */

.logo-area {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 5px 25px;

    border-bottom: 1px solid var(--border);
}
.logo-area img {
    width: 42px;
    height: 42px;

    object-fit: contain;

    border-radius: 12px;

    flex-shrink: 0;

    display: block;
}
.logo-area strong {
    display: block;

    font-size: 14px;

    margin-bottom: 2px;
}

.logo-area span {
    color: var(--muted);

    font-size: 11px;
}


/* MENU */

.menu {
    margin-top: 25px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.menu-item {
    width: 100%;

    border: none;

    background: transparent;

    color: var(--muted);

    padding: 12px 13px;

    border-radius: 10px;

    cursor: pointer;

    text-align: left;

    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 13px;

    transition: 0.2s;
}

.menu-item:hover {
    background: #161c24;

    color: white;
}

.menu-item.ativo {
    background: var(--orange-soft);

    color: var(--orange);
}

.menu-icon {
    width: 20px;

    text-align: center;

    font-size: 17px;
}


/* SIDEBAR FOOTER */

.sidebar-footer {
    margin-top: auto;

    border-top: 1px solid var(--border);

    padding-top: 20px;
}

.plano {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.plano span {
    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1px;
}

.plano strong {
    color: var(--orange);

    font-size: 12px;

    background: var(--orange-soft);

    padding: 5px 9px;

    border-radius: 20px;
}

.sidebar-footer p {
    color: #59616d;

    font-size: 10px;

    margin-top: 8px;
}


/* =========================================
   CONTEÚDO
========================================= */

.main-content {
    margin-left: 245px;

    width: calc(100% - 245px);

    max-width: 1450px;

    padding: 32px 40px 50px;
}


/* =========================================
   TOPO
========================================= */

.topbar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;
}

.pagina-label {
    color: var(--orange);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 700;
}

.topbar h1 {
    font-size: 28px;

    margin-top: 5px;

    letter-spacing: -0.5px;
}

.topbar p {
    color: var(--muted);

    margin-top: 5px;

    font-size: 13px;
}

.topbar-status {
    color: var(--muted);

    font-size: 12px;

    display: flex;

    align-items: center;

    gap: 7px;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 10px rgba(53, 208, 127, 0.5);
}


/* =========================================
   CABEÇALHOS
========================================= */

.section-header,
.panel-header,
.simulator-header {
    margin-bottom: 20px;
}

.section-header > div,
.panel-header > div,
.simulator-header > div {
    display: flex;

    align-items: center;

    gap: 13px;
}

.section-number {
    width: 30px;
    height: 30px;

    min-width: 30px;

    border-radius: 8px;

    background: var(--orange-soft);

    color: var(--orange);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 10px;

    font-weight: 800;
}

h2 {
    font-size: 16px;

    margin-bottom: 3px;
}

.section-header p,
.panel-header p,
.simulator-header p {
    color: var(--muted);

    font-size: 11px;
}


/* =========================================
   MARKETPLACES
========================================= */

.marketplace-section {
    margin-bottom: 22px;
}

.marketplace-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.marketplace-card {
    position: relative;

    border: 1px solid var(--border);

    background: var(--panel);

    color: white;

    border-radius: var(--radius);

    padding: 17px;

    display: flex;

    align-items: center;

    gap: 14px;

    cursor: pointer;

    text-align: left;

    transition:
        border-color 0.2s,
        transform 0.2s,
        background 0.2s;
}

.marketplace-card:hover {
    border-color: #394451;

    transform: translateY(-1px);
}
/* CARD SELECIONADO - BASE */
.marketplace-card.ativo {
    background: var(--panel);
}


/* MERCADO LIVRE - NEON AMARELO */
#mercadoLivre.ativo {
    border-color: #FFE600;

    box-shadow:
        0 0 6px rgba(255, 230, 0, 0.8),
        0 0 14px rgba(255, 230, 0, 0.40),
        inset 0 0 8px rgba(255, 230, 0, 0.08);
}


/* SHOPEE - NEON LARANJA */
#shopee.ativo {
    border-color: #FF5A1F;

    box-shadow:
        0 0 6px rgba(255, 90, 31, 0.8),
        0 0 14px rgba(255, 90, 31, 0.40),
        inset 0 0 8px rgba(255, 90, 31, 0.08);
}/* CHECK MERCADO LIVRE */
#mercadoLivre.ativo .marketplace-check {
    background: #FFE600;
    border-color: #FFE600;
    color: #111111;

    box-shadow:
        0 0 8px rgba(255, 230, 0, 0.7);
}


/* CHECK SHOPEE */
#shopee.ativo .marketplace-check {
    background: #FF5A1F;
    border-color: #FF5A1F;
    color: #ffffff;

    box-shadow:
        0 0 8px rgba(255, 90, 31, 0.7);
}

.marketplace-logo {
    width: 45px;
    height: 45px;

    min-width: 45px;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-weight: 900;
}

.ml-logo {
    background: #ffe600;

    color: #1c3d72;
}

.shopee-logo {
    background: #ee4d2d;

    color: white;
}

.marketplace-info {
    min-width: 0;
}

.marketplace-info strong {
    display: block;

    font-size: 13px;

    margin-bottom: 4px;
}

.marketplace-info span {
    color: var(--muted);

    font-size: 10px;
}

.marketplace-check {
    margin-left: auto;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    border: 1px solid var(--border);

    color: transparent;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 11px;
}

.marketplace-card.ativo
.marketplace-check {
    background: var(--orange);

    border-color: var(--orange);

    color: #111;
}


/* =========================================
   CALCULADORA
========================================= */

.calculator-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, 0.75fr);

    gap: 20px;

    align-items: stretch;
}

.panel,
.resultado-panel,
.smart-price-panel,
.simulator-panel {
    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);
}

.panel {
    padding: 23px;
}


/* =========================================
   FORMULÁRIO
========================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.form-group {
    min-width: 0;
}

.form-group.full {
    margin-bottom: 15px;
}

.form-group label,
.target-input label {
    display: block;

    color: #9ba3af;

    font-size: 11px;

    margin-bottom: 7px;
}

input {
    font-family: inherit;
}

.form-group > input {
    width: 100%;

    border: 1px solid #29323d;

    background: #0b1016;

    color: white;

    border-radius: 9px;

    padding: 12px;

    outline: none;

    font-size: 13px;
}

.form-group > input:focus {
    border-color: var(--orange);
}


/* INPUT COM PREFIXO */

.input-wrapper {
    width: 100%;

    display: flex;

    align-items: center;

    border: 1px solid #29323d;

    background: #0b1016;

    border-radius: 9px;

    overflow: hidden;

    transition: border-color 0.2s;
}

.input-wrapper:focus-within {
    border-color: var(--orange);
}

.input-wrapper span {
    color: #69727e;

    padding-left: 11px;

    padding-right: 2px;

    font-size: 11px;

    white-space: nowrap;
}

.input-wrapper input {
    width: 100%;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    padding: 12px 10px;

    font-size: 13px;
}


/* REMOVE SETAS */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


/* =========================================
   TAXAS
========================================= */

.tax-preview {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 18px;

    padding-top: 17px;

    border-top: 1px solid var(--border);
}

.tax-preview div {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    font-size: 10px;
}

.tax-preview span {
    color: var(--muted);
}

.tax-preview strong {
    color: #cbd1d8;
}


/* =========================================
   RESULTADO
========================================= */

.resultado-panel {
    padding: 23px;

    display: flex;

    flex-direction: column;
}

.resultado-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;
}

.resultado-header > span {
    color: var(--muted);

    font-size: 9px;

    letter-spacing: 1px;

    font-weight: 700;
}

.resultado-status {
    color: var(--green);

    background: var(--green-soft);

    padding: 6px 9px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 700;
}


/* LUCRO */

.lucro-principal {
    padding: 30px 0 24px;

    text-align: center;

    border-bottom: 1px solid var(--border);
}

.lucro-principal span {
    color: var(--muted);

    font-size: 11px;
}

.lucro-principal strong {
    display: block;

    color: var(--green);

    font-size: clamp(32px, 4vw, 44px);

    letter-spacing: -1.5px;

    margin: 6px 0 2px;
}

.lucro-principal p {
    color: #5f6874;

    font-size: 9px;
}


/* MARGEM */

.margem-box {
    padding: 18px 0;
}

.margem-box > div:first-child {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;
}

.margem-box span {
    color: var(--muted);

    font-size: 10px;
}

.margem-box strong {
    font-size: 11px;
}

.margem-bar {
    height: 6px;

    background: #252c34;

    border-radius: 20px;

    overflow: hidden;
}

.margem-progress {
    width: 0%;

    height: 100%;

    background: var(--green);

    border-radius: 20px;

    transition: width 0.35s;
}


/* RESUMO */

.resultado-resumo {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.resultado-resumo div {
    background: #0c1117;

    border: 1px solid #202832;

    border-radius: 10px;

    padding: 11px;
}

.resultado-resumo span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    margin-bottom: 5px;
}

.resultado-resumo strong {
    font-size: 11px;
}

.resultado-resumo
.destaque strong {
    color: var(--green);
}


/* =========================================
   COMPOSIÇÃO
========================================= */

.composicao {
    margin-top: auto;

    padding-top: 22px;
}

.composicao-title {
    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 9px;

    margin-bottom: 8px;
}

.composicao-bar {
    height: 9px;

    width: 100%;

    background: #252c34;

    border-radius: 20px;

    display: flex;

    overflow: hidden;
}

.bar-custo {
    width: 50%;

    background: #566170;
}

.bar-taxas {
    width: 25%;

    background: var(--yellow);
}

.bar-lucro {
    width: 25%;

    background: var(--green);
}

.legenda {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 10px;
}

.legenda span {
    display: flex;

    align-items: center;

    gap: 5px;

    color: var(--muted);

    font-size: 8px;
}

.dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    display: inline-block;
}

.dot.custo {
    background: #566170;
}

.dot.taxas {
    background: var(--yellow);
}

.dot.lucro {
    background: var(--green);
}


/* =========================================
   PREÇO INTELIGENTE
========================================= */

.smart-price-panel {
    margin-top: 20px;

    padding: 23px;

    background:
        linear-gradient(
            120deg,
            rgba(255, 159, 28, 0.07),
            var(--panel) 40%
        );
}

.smart-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 25px;

    margin-bottom: 20px;
}

.pro-badge {
    display: inline-block;

    color: var(--orange);

    background: var(--orange-soft);

    border: 1px solid rgba(255, 159, 28, 0.2);

    padding: 4px 7px;

    border-radius: 5px;

    font-size: 8px;

    font-weight: 800;

    margin-bottom: 7px;
}

.smart-header p {
    color: var(--muted);

    font-size: 10px;

    margin-top: 3px;
}

.target-input {
    width: 230px;

    min-width: 230px;
}

.smart-results {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.smart-card {
    position: relative;

    background: #0c1117;

    border: 1px solid #232b35;

    border-radius: 12px;

    padding: 17px;
}

.smart-card.recomendado {
    border-color:
        rgba(255, 159, 28, 0.65);

    background:
        linear-gradient(
            135deg,
            rgba(255, 159, 28, 0.1),
            #0c1117
        );
}

.smart-card > span {
    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.8px;
}

.smart-card strong {
    display: block;

    font-size: 20px;

    margin: 7px 0 4px;
}

.smart-card.recomendado strong {
    color: var(--orange);
}

.smart-card p {
    color: #5e6671;

    font-size: 9px;
}

.recommended-label {
    position: absolute;

    right: 10px;
    top: 10px;

    color: var(--orange);

    font-size: 7px;

    font-weight: 800;
}


/* =========================================
   SIMULADOR
========================================= */

.simulator-panel {
    margin-top: 20px;

    padding: 23px;
}

.slider-area {
    padding: 10px 5px;
}

.slider-value {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;
}

.slider-value span {
    color: var(--muted);

    font-size: 10px;
}

.slider-value strong {
    color: var(--orange);

    font-size: 18px;
}


/* SLIDER */

input[type="range"] {
    width: 100%;

    accent-color: var(--orange);

    cursor: pointer;
}

.slider-scale {
    display: flex;

    justify-content: space-between;

    margin-top: 5px;

    color: #5d6672;

    font-size: 8px;
}

.simulator-results {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 15px;
}

.simulator-results div {
    background: #0c1117;

    border: 1px solid #232b35;

    border-radius: 10px;

    padding: 14px;
}

.simulator-results span {
    display: block;

    color: var(--muted);

    font-size: 9px;

    margin-bottom: 5px;
}

.simulator-results strong {
    font-size: 15px;
}


/* =========================================
   FOOTER
========================================= */

.footer {
    display: flex;

    justify-content: space-between;

    margin-top: 28px;

    padding-top: 18px;

    border-top: 1px solid var(--border);

    color: #555e69;

    font-size: 9px;
}


/* =========================================
   RESPONSIVIDADE
========================================= */

@media (max-width: 1050px) {

    .calculator-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 850px) {

    .sidebar {
        width: 72px;

        padding: 20px 10px;
    }

    .logo-area {
        justify-content: center;
    }

    .logo-area > div:last-child,
    .menu-item:not(.ativo) {
        font-size: 0;
    }

    .menu-item {
        justify-content: center;

        font-size: 0;
    }

    .menu-icon {
        font-size: 18px;
    }

    .sidebar-footer {
        display: none;
    }

    .main-content {
        margin-left: 72px;

        width: calc(100% - 72px);

        padding: 25px 20px 40px;
    }

}


@media (max-width: 650px) {

    .app-layout {
        display: block;
    }

    .sidebar {
        position: static;

        width: 100%;

        min-height: auto;

        padding: 14px 15px;

        border-right: none;

        border-bottom: 1px solid var(--border);

        flex-direction: row;

        align-items: center;
    }

    .logo-area {
        padding: 0;

        border: none;
    }

       .menu {
        margin: 0 0 0 auto;

        flex-direction: row;
    }

    .menu-item {
        display: none;
    }

    .menu-item.ativo {
        display: flex;

        padding: 10px;
    }

    .main-content {
        margin-left: 0;

        width: 100%;

        padding: 22px 15px 35px;
    }

    .topbar {
        align-items: flex-start;

        gap: 15px;
    }

    .topbar-status {
        display: none;
    }

    .topbar h1 {
        font-size: 23px;
    }

    .marketplace-grid,
    .form-grid,
    .smart-results,
    .simulator-results {
        grid-template-columns: 1fr;
    }

    .smart-header {
        align-items: stretch;

        flex-direction: column;
    }

    .target-input {
        width: 100%;

        min-width: 0;
    }

    .resultado-resumo {
        grid-template-columns: 1fr 1fr;
    }

    .resultado-resumo
    .destaque {
        grid-column: 1 / -1;
    }

    .tax-preview {
        grid-template-columns: 1fr;
    }

    .footer {
        flex-direction: column;

        gap: 5px;
    }

}.marketplace-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.ml-logo,
.shopee-logo {
    overflow: hidden;
}
/* LOGO SHOPEE - SEM QUADRADO DE FUNDO */
.shopee-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.shopee-logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}
/* =========================================
   NAVEGAÇÃO ENTRE PÁGINAS
========================================= */

.pagina-conteudo {
    display: block;
}

.pagina-oculta {
    display: none;
}
/* =========================================
   MARKETPLACES - PREÇO INTELIGENTE
========================================= */

/* Card selecionado mantém fundo escuro */
.preco-marketplace-card.ativo {
    background: var(--panel);
}


/* MERCADO LIVRE SELECIONADO */
.preco-marketplace-card[data-preco-marketplace="mercadolivre"].ativo {
    border-color: #FFE600;

    box-shadow:
        0 0 6px rgba(255, 230, 0, 0.8),
        0 0 14px rgba(255, 230, 0, 0.40),
        inset 0 0 8px rgba(255, 230, 0, 0.08);
}


/* CHECK MERCADO LIVRE */
.preco-marketplace-card[data-preco-marketplace="mercadolivre"].ativo
.marketplace-check {

    background: #FFE600;
    border-color: #FFE600;
    color: #111111;

    box-shadow:
        0 0 8px rgba(255, 230, 0, 0.7);
}


/* SHOPEE SELECIONADA */
.preco-marketplace-card[data-preco-marketplace="shopee"].ativo {
    border-color: #FF5A1F;

    box-shadow:
        0 0 6px rgba(255, 90, 31, 0.8),
        0 0 14px rgba(255, 90, 31, 0.40),
        inset 0 0 8px rgba(255, 90, 31, 0.08);
}


/* CHECK SHOPEE */
.preco-marketplace-card[data-preco-marketplace="shopee"].ativo
.marketplace-check {

    background: #FF5A1F;
    border-color: #FF5A1F;
    color: #ffffff;

    box-shadow:
        0 0 8px rgba(255, 90, 31, 0.7);
}/* =========================================
   META DE LUCRO
========================================= */

.meta-lucro-box {
    margin-top: 8px;
}

.meta-lucro-tipos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.meta-lucro-btn {
    border: 1px solid var(--border);
    background: #11161d;
    color: #858e9b;

    padding: 11px 14px;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.meta-lucro-btn:hover {
    color: #ffffff;
    border-color: #555f6c;
}

.meta-lucro-btn.ativo {
    color: var(--orange);
    border-color: var(--orange);

    background:
        rgba(255, 90, 31, 0.08);

    box-shadow:
        0 0 8px rgba(255, 90, 31, 0.18);
}

.meta-lucro-input {
    margin-top: 4px;
}

.meta-lucro-ajuda {
    margin-top: 8px;

    color: #858e9b;
    font-size: 12px;
    line-height: 1.5;
}/* =========================================
   PREÇOS ESTRATÉGICOS
========================================= */

.precos-estrategicos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-top: 18px;
}

.preco-estrategico-card {
    position: relative;
    overflow: hidden;

    padding: 18px;

    background: #11161d;

    border: 1px solid var(--border);
    border-radius: 12px;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.preco-estrategico-card:hover {
    transform: translateY(-2px);
}


/* TOPO */

.preco-estrategico-topo {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;
}

.preco-estrategico-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 700;
}

.preco-estrategico-label {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


/* VALOR */

.preco-estrategico-card strong {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
}


/* DESCRIÇÃO */

.preco-estrategico-card p {
    margin: 0;

    color: #858e9b;

    font-size: 11px;
    line-height: 1.5;
}


/* PREÇO MÍNIMO */

.preco-estrategico-card.minimo {
    border-color:
        rgba(255, 200, 87, 0.25);
}

.preco-estrategico-card.minimo
.preco-estrategico-icone {

    color: #ffc857;

    background:
        rgba(255, 200, 87, 0.10);
}

.preco-estrategico-card.minimo
.preco-estrategico-label {

    color: #ffc857;
}


/* PREÇO SUGERIDO */

.preco-estrategico-card.sugerido {
    border-color:
        rgba(53, 208, 127, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(53, 208, 127, 0.08),
            #11161d 55%
        );

    box-shadow:
        0 0 18px
        rgba(53, 208, 127, 0.05);
}

.preco-estrategico-card.sugerido
.preco-estrategico-icone {

    color: #35d07f;

    background:
        rgba(53, 208, 127, 0.12);
}

.preco-estrategico-card.sugerido
.preco-estrategico-label {

    color: #35d07f;
}

.preco-estrategico-card.sugerido strong {
    color: #35d07f;
}


/* RESPONSIVO */

@media (max-width: 700px) {

    .precos-estrategicos {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   RESULTADO DO PREÇO SUGERIDO
========================================= */

.resultado-preco-sugerido {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 14px;
    margin-bottom: 14px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}

.resultado-preco-sugerido div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.resultado-preco-sugerido span {
    color: #858e9b;

    font-size: 10px;
    font-weight: 500;
}

.resultado-preco-sugerido strong {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}
/* =========================================
   MEUS PRODUTOS
========================================= */

.produtos-section {
    width: 100%;
}

.produtos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.produtos-topo > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.produtos-topo h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 20px;
}

.produtos-topo p {
    margin: 0;

    color: #858e9b;

    font-size: 13px;
}


/* NOVO PRODUTO */

.btn-novo-produto,
.btn-primeiro-produto {
    border: 1px solid var(--orange);

    background: var(--orange);

    color: #ffffff;

    padding: 11px 16px;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-novo-produto:hover,
.btn-primeiro-produto:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 18px
        rgba(255, 90, 31, 0.20);
}


/* RESUMO */

.produtos-resumo {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 18px;
}

.produto-resumo-card {
    padding: 18px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}

.produto-resumo-card span {
    display: block;

    margin-bottom: 8px;

    color: #858e9b;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.produto-resumo-card strong {
    display: block;

    color: #ffffff;

    font-size: 22px;

    margin-bottom: 4px;
}

.produto-resumo-card small {
    color: #626c79;

    font-size: 11px;
}


/* BUSCA */

.produtos-ferramentas {
    margin-bottom: 14px;
}

/* =========================================
   BUSCA E FILTROS - VISUAL CALCULADORA PRO
========================================= */

.busca-produtos input,
.grupo-filtro select {

    width: 100%;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.04);

color: #ffffff;    font-size: 14px;

    outline: none;

    transition: 0.2s ease;
}

.busca-produtos input::placeholder {
    color: #9aa4b2;
}
.grupo-filtro select option {
    background: #171b22;
    color: #ffffff;
}
/* CAMPO DE BUSCA */

.busca-produtos input {
    padding: 0 16px 0 46px;
}


/* FILTROS */

.grupo-filtro select {
    min-width: 150px;
    padding: 0 38px 0 14px;

    cursor: pointer;
}


/* PLACEHOLDER */

.busca-produtos input::placeholder {
    color: #7f8a99;
}


/* FOCO */

.busca-produtos input:focus,
.grupo-filtro select:focus {

    border-color: rgba(52, 131, 250, 0.65);

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        0 0 0 3px rgba(52, 131, 250, 0.10);
}

.produtos-ferramentas {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 24px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);
}
/* HOVER */

.grupo-filtro select:hover,
.busca-produtos input:hover {

    border-color: rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.055);
}


/* LABEL DOS FILTROS */

.grupo-filtro label {

    font-size: 12px;
    font-weight: 600;

    color: #8d97a5;
}


/* ÍCONE DA BUSCA */

.busca-produtos span {

    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: #7f8a99;

    pointer-events: none;
}


/* OPÇÕES DO SELECT */

.grupo-filtro select option {

    background: #171b22;

    color: #f5f7fa;
}


/* ÁREA DOS PRODUTOS */

.produtos-lista {
    min-height: 280px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}


/* LISTA VAZIA */

.produtos-vazio {
    min-height: 280px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 35px;
}

.produtos-vazio-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 14px;

    border-radius: 12px;

    background:
        rgba(255, 90, 31, 0.08);

    color: var(--orange);

    font-size: 23px;
}

.produtos-vazio h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 16px;
}

.produtos-vazio p {
    max-width: 430px;

    margin: 0 0 18px;

    color: #858e9b;

    font-size: 12px;

    line-height: 1.6;
}


/* RESPONSIVO */

@media (max-width: 800px) {

    .produtos-resumo {
        grid-template-columns: 1fr;
    }

    .produtos-topo {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================
   MEUS PRODUTOS
========================================= */

.produtos-section {
    width: 100%;
}


/* =========================================
   CABEÇALHO DA ÁREA
========================================= */

.produtos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.produtos-topo > div {
    display: flex;
    align-items: flex-start;

    gap: 14px;
}

.produtos-topo h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
}

.produtos-topo p {
    margin: 0;

    color: #858e9b;

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================
   BOTÃO NOVO PRODUTO
========================================= */

.btn-novo-produto,
.btn-primeiro-produto {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--orange);

    background: var(--orange);

    color: #ffffff;

    padding: 11px 16px;

    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.btn-novo-produto:hover,
.btn-primeiro-produto:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 18px
        rgba(255, 90, 31, 0.22);
}


/* =========================================
   CARDS DE RESUMO
========================================= */

.produtos-resumo {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 18px;
}

.produto-resumo-card {
    padding: 18px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}

.produto-resumo-card span {
    display: block;

    margin-bottom: 9px;

    color: #858e9b;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.produto-resumo-card strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 700;
}

.produto-resumo-card small {
    color: #626c79;

    font-size: 11px;
}


/* =========================================
   BUSCA DE PRODUTOS
========================================= */

.produtos-ferramentas {
    margin-bottom: 14px;
}

.busca-produtos {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 0 14px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 10px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.busca-produtos:focus-within {
    border-color:
        rgba(255, 90, 31, 0.6);

    box-shadow:
        0 0 0 3px
        rgba(255, 90, 31, 0.06);
}

.busca-produtos span {
    flex-shrink: 0;

    color: #858e9b;

    font-size: 16px;
}

.busca-produtos input {
    width: 100%;

    padding: 13px 0;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
}

.busca-produtos input::placeholder {
    color: #626c79;
}


/* =========================================
   ÁREA DA LISTA
========================================= */

.produtos-lista {
    width: 100%;

    min-height: 290px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;
}


/* =========================================
   NENHUM PRODUTO CADASTRADO
========================================= */

.produtos-vazio {
    min-height: 290px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 40px 25px;
}

.produtos-vazio-icone {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 15px;

    border-radius: 12px;

    background:
        rgba(255, 90, 31, 0.08);

    border:
        1px solid
        rgba(255, 90, 31, 0.12);

    color: var(--orange);

    font-size: 22px;
}

.produtos-vazio h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}

.produtos-vazio p {
    max-width: 440px;

    margin: 0 0 19px;

    color: #858e9b;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 900px) {

    .produtos-resumo {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .produtos-topo {
        flex-direction: column;

        align-items: stretch;
    }

    .btn-novo-produto {
        width: 100%;
    }

}
/* =========================================
   MODAL NOVO PRODUTO
========================================= */

.modal-produto {
    position: fixed;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;

    z-index: 1000;
}

.modal-produto.aberto {
    display: flex;
}

.modal-produto-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(3px);
}

.modal-produto-conteudo {
    position: relative;

    width: 100%;
    max-width: 720px;

    max-height: 90vh;
    overflow-y: auto;

    background: #0d1218;

    border: 1px solid var(--border);

    border-radius: 14px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    z-index: 1;
}


/* CABEÇALHO */

.modal-produto-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 24px;

    border-bottom: 1px solid var(--border);
}

.modal-produto-label {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.modal-produto-header h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 20px;
}

.modal-produto-header p {
    margin: 0;

    color: #77818e;

    font-size: 12px;
}

.modal-produto-fechar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: transparent;

    color: #8993a0;

    font-size: 22px;

    cursor: pointer;
}

.modal-produto-fechar:hover {
    color: #ffffff;

    border-color: #46505c;
}


/* FORMULÁRIO */

#formProduto {
    padding: 24px;
}

.produto-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;
}

.produto-form-campo {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.produto-form-grande {
    grid-column: 1 / -1;
}

.produto-form-campo label {
    color: #a0a8b3;

    font-size: 11px;
    font-weight: 600;
}

.produto-form-campo > input {
    width: 100%;

    padding: 12px 13px;

    outline: none;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: #090d12;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
}

.produto-form-campo > input:focus {
    border-color: var(--orange);
}


/* INPUT COM R$ */

.produto-input-prefixo {
    display: flex;

    align-items: center;

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: #090d12;

    overflow: hidden;
}

.produto-input-prefixo:focus-within {
    border-color: var(--orange);
}

.produto-input-prefixo span {
    padding-left: 13px;

    color: #68727e;

    font-size: 12px;
    font-weight: 600;
}

.produto-input-prefixo input {
    width: 100%;

    padding: 12px 13px 12px 7px;

    outline: none;

    border: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
}


/* RODAPÉ DO FORMULÁRIO */

.modal-produto-footer {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid var(--border);
}

.btn-cancelar-produto,
.btn-salvar-produto {
    padding: 11px 17px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.btn-cancelar-produto {
    border: 1px solid var(--border);

    background: transparent;

    color: #9099a5;
}

.btn-cancelar-produto:hover {
    color: #ffffff;
}

.btn-salvar-produto {
    border: 1px solid var(--orange);

    background: var(--orange);

    color: #ffffff;
}

.btn-salvar-produto:hover {
    box-shadow:
        0 5px 18px
        rgba(255, 90, 31, 0.20);
}


/* RESPONSIVO */

@media (max-width: 650px) {

    .modal-produto {
        padding: 15px;
    }

    .produto-form-grid {
        grid-template-columns: 1fr;
    }

    .produto-form-grande {
        grid-column: auto;
    }

}
/* =========================================
   PRODUTO CADASTRADO
========================================= */

.produto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    border-bottom: 1px solid var(--border);

    transition: background 0.2s ease;
}

.produto-item:last-child {
    border-bottom: none;
}

.produto-item:hover {
    background: rgba(255, 255, 255, 0.015);
}


/* INFORMAÇÕES */

.produto-item-info {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.produto-item-icone {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(255, 90, 31, 0.08);

    color: var(--orange);

    font-size: 17px;
}

.produto-item-info > div:last-child {
    min-width: 0;
}

.produto-item-info strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.produto-item-info span {
    display: block;

    color: #66717e;

    font-size: 11px;
}


/* CUSTO */

.produto-item-valor {
    flex-shrink: 0;

    text-align: right;
}

.produto-item-valor span {
    display: block;

    margin-bottom: 4px;

    color: #66717e;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}

.produto-item-valor strong {
    color: #ffffff;

    font-size: 14px;
}
/* =========================================
   FOTO DO PRODUTO
========================================= */

.produto-foto-area {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 16px;

    margin-bottom: 3px;

    background: rgba(255, 255, 255, 0.015);

    border: 1px solid var(--border);

    border-radius: 10px;
}


/* PREVIEW */

.produto-foto-preview {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;

    flex-shrink: 0;

    overflow: hidden;

    background: #090d12;

    border: 1px dashed #303944;

    border-radius: 11px;
}

.produto-foto-preview span {
    color: #697480;

    font-size: 27px;
}

.produto-foto-preview img {
    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.produto-foto-preview.com-foto img {
    display: block;
}

.produto-foto-preview.com-foto span {
    display: none;
}


/* INFORMAÇÕES */

.produto-foto-info {
    display: flex;

    align-items: flex-start;

    flex-direction: column;
}

.produto-foto-info label {
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}

.produto-foto-info p {
    margin: 0 0 11px;

    color: #737e8b;

    font-size: 11px;

    line-height: 1.5;
}

.produto-foto-info small {
    display: block;

    margin-top: 8px;

    color: #555f6b;

    font-size: 9px;
}


/* BOTÕES */

.btn-selecionar-foto {
    padding: 8px 12px;

    border: 1px solid var(--orange);

    border-radius: 7px;

    background: rgba(255, 90, 31, 0.08);

    color: var(--orange);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.btn-selecionar-foto:hover {
    background: rgba(255, 90, 31, 0.14);
}

.btn-remover-foto {
    display: none;

    margin-top: 7px;

    padding: 0;

    border: none;

    background: transparent;

    color: #777f89;

    font-family: inherit;
    font-size: 10px;

    cursor: pointer;
}

.btn-remover-foto:hover {
    color: #ffffff;
}


/* =========================================
   FOTO NA LISTA DE PRODUTOS
========================================= */

.produto-item-foto {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        rgba(255, 90, 31, 0.08);

    border: 1px solid var(--border);

    border-radius: 9px;

    color: var(--orange);

    font-size: 17px;
}

.produto-item-foto img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* CELULAR */

@media (max-width: 600px) {

    .produto-foto-area {
        align-items: flex-start;
    }

    .produto-foto-preview {
        width: 80px;
        height: 80px;
    }

}
/* =========================================
   AÇÕES DOS PRODUTOS
========================================= */

.produto-item-lado-direito {
    display: flex;

    align-items: center;

    gap: 22px;

    flex-shrink: 0;
}


.produto-item-acoes {
    display: flex;

    align-items: center;

    gap: 7px;
}


.btn-editar-produto,
.btn-excluir-produto {
    padding: 7px 10px;

    border-radius: 7px;

    background: transparent;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* EDITAR */

.btn-editar-produto {
    border:
        1px solid
        rgba(255, 90, 31, 0.35);

    color: var(--orange);
}

.btn-editar-produto:hover {
    background:
        rgba(255, 90, 31, 0.08);

    border-color:
        var(--orange);
}


/* EXCLUIR */

.btn-excluir-produto {
    border:
        1px solid
        rgba(255, 80, 80, 0.25);

    color: #d76a6a;
}

.btn-excluir-produto:hover {
    background:
        rgba(255, 80, 80, 0.07);

    border-color:
        rgba(255, 80, 80, 0.55);
}


/* RESPONSIVO */

@media (max-width: 700px) {

    .produto-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .produto-item-lado-direito {
        width: 100%;

        justify-content: space-between;

        padding-left: 58px;
    }

}
/* =========================================
   USAR PRODUTO NA CALCULADORA
========================================= */

.btn-usar-produto {
    padding: 7px 11px;

    border:
        1px solid
        rgba(45, 190, 120, 0.35);

    border-radius: 7px;

    background:
        rgba(45, 190, 120, 0.06);

    color: #42c98a;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn-usar-produto:hover {
    background:
        rgba(45, 190, 120, 0.12);

    border-color:
        rgba(45, 190, 120, 0.65);
}
/* =========================================
   BOTÃO PREÇO INTELIGENTE - PRODUTOS
========================================= */

.btn-preco-produto {
    padding: 7px 11px;

    border:
        1px solid
        rgba(255, 170, 45, 0.35);

    border-radius: 7px;

    background:
        rgba(255, 170, 45, 0.06);

    color: #f0ad45;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn-preco-produto:hover {
    background:
        rgba(255, 170, 45, 0.12);

    border-color:
        rgba(255, 170, 45, 0.65);
}
/* =========================================
   DASHBOARD
========================================= */

.dashboard-section {
    width: 100%;
}

.dashboard-boas-vindas,
.dashboard-bloco {
    margin-bottom: 25px;
}

.dashboard-boas-vindas > div,
.dashboard-bloco-titulo > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dashboard-boas-vindas h2,
.dashboard-bloco-titulo h2 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 20px;
}

.dashboard-boas-vindas p,
.dashboard-bloco-titulo p {
    margin: 0;
    color: #858e9b;
    font-size: 12px;
}


/* INDICADORES */

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 30px;
}

.dashboard-card {
    position: relative;

    padding: 19px;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}

.dashboard-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--orange);

    opacity: 0.7;
}

.dashboard-card span {
    display: block;

    margin-bottom: 9px;

    color: #858e9b;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.dashboard-card strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 23px;
}

.dashboard-card small {
    color: #626c79;

    font-size: 10px;
}


/* TÍTULOS */

.dashboard-bloco-titulo {
    margin-bottom: 14px;
}


/* ATALHOS */

.dashboard-atalhos {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.dashboard-atalho {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    text-align: left;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 11px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.dashboard-atalho:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 90, 31, 0.4);

    background:
        rgba(255, 90, 31, 0.025);
}

.dashboard-atalho-icone {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(255, 90, 31, 0.08);

    color: var(--orange);

    font-size: 16px;
    font-weight: 800;
}

.dashboard-atalho strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 12px;
}

.dashboard-atalho span {
    color: #69737f;

    font-size: 10px;
}


/* PRODUTOS RECENTES */

.dashboard-produtos {
    min-height: 100px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 11px;

    overflow: hidden;
}

.dashboard-vazio {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 100px;

    padding: 20px;

    color: #69737f;

    font-size: 11px;
}


/* RESPONSIVO */

@media (max-width: 900px) {

    .dashboard-cards,
    .dashboard-atalhos {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   PRODUTOS RECENTES - DASHBOARD
========================================= */

.dashboard-produto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 13px 16px;

    border-bottom: 1px solid var(--border);
}

.dashboard-produto-item:last-child {
    border-bottom: none;
}


.dashboard-produto-info {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


.dashboard-produto-foto {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);

    color: #68727e;

    font-size: 15px;
}


.dashboard-produto-foto img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.dashboard-produto-dados {
    min-width: 0;
}


.dashboard-produto-dados strong {
    display: block;

    margin-bottom: 4px;

    overflow: hidden;

    color: #ffffff;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.dashboard-produto-dados span {
    display: block;

    overflow: hidden;

    color: #68727e;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.dashboard-produto-custo {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    text-align: right;
}


.dashboard-produto-custo span {
    display: block;

    margin-bottom: 4px;

    color: #68727e;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}


.dashboard-produto-custo strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
}


@media (max-width: 600px) {

    .dashboard-produto-item {
        align-items: flex-start;

        flex-direction: column;
    }

    .dashboard-produto-custo {
        padding-left: 56px;

        text-align: left;
    }

}
/* =========================================
   ANÁLISES
========================================= */

.analises-section {
    width: 100%;
}

.analises-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
}

.analises-cabecalho h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 20px;
}

.analises-cabecalho p {
    margin: 0;

    color: #858e9b;

    font-size: 12px;
}


/* PESQUISA */

.analise-pesquisa {
    display: flex;
    align-items: flex-end;

    gap: 12px;

    padding: 18px;

    margin-bottom: 20px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}

.analise-pesquisa-campo {
    flex: 1;
}

.analise-pesquisa-campo label {
    display: block;

    margin-bottom: 7px;

    color: #858e9b;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.analise-pesquisa-campo input {
    width: 100%;

    padding: 12px 13px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--border);

    border-radius: 8px;

    outline: none;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.analise-pesquisa-campo input:focus {
    border-color: rgba(255, 90, 31, 0.55);

    background: rgba(255, 90, 31, 0.025);
}


.btn-analisar-mercado {
    min-height: 41px;

    padding: 0 18px;

    border: 1px solid rgba(255, 90, 31, 0.55);

    border-radius: 8px;

    background: rgba(255, 90, 31, 0.1);

    color: var(--orange);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn-analisar-mercado:hover {
    background: rgba(255, 90, 31, 0.18);

    border-color: var(--orange);
}


/* ÁREA DE RESULTADOS */

.analise-resultados {
    min-height: 230px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;
}

.analise-estado-inicial {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 230px;

    padding: 30px;

    flex-direction: column;

    text-align: center;
}

.analise-estado-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 12px;

    border-radius: 10px;

    background: rgba(255, 90, 31, 0.08);

    color: var(--orange);

    font-size: 22px;
}

.analise-estado-inicial strong {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 12px;
}

.analise-estado-inicial p {
    max-width: 340px;

    margin: 0;

    color: #68727e;

    font-size: 10px;

    line-height: 1.6;
}


@media (max-width: 700px) {

    .analise-pesquisa {
        align-items: stretch;

        flex-direction: column;
    }

    .btn-analisar-mercado {
        width: 100%;
    }

}
/* =========================================
   SELETOR DE ANÚNCIOS - ANÁLISES
========================================= */

.analise-pesquisa-campo select {
    width: 100%;

    padding: 12px 13px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--border);

    border-radius: 8px;

    outline: none;

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.analise-pesquisa-campo select:focus {
    border-color: rgba(255, 90, 31, 0.55);

    background: rgba(255, 90, 31, 0.025);
}


.analise-pesquisa-campo select option {
    background: #15191f;

    color: #ffffff;
}
/* =========================================
   RESULTADO DA ANÁLISE DE MERCADO
========================================= */

.analise-produto-header {
    padding: 18px 18px 0;
}

.analise-produto-header span {
    display: block;
    margin-bottom: 5px;
    color: var(--orange);
    font-size: 9px;
    font-weight: 700;
}

.analise-produto-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
}


.analise-cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    padding: 18px;
}


.analise-card {
    padding: 15px;

    background:
        rgba(255, 255, 255, 0.02);

    border:
        1px solid var(--border);

    border-radius: 9px;
}


.analise-card span {
    display: block;

    margin-bottom: 7px;

    color: #77818e;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;
}


.analise-card strong {
    display: block;

    color: #ffffff;

    font-size: 17px;
}


.analise-card small {
    display: block;

    margin-top: 4px;

    color: var(--orange);

    font-size: 9px;
}


.analise-detalhes {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1px;

    margin: 0 18px 18px;

    overflow: hidden;

    background: var(--border);

    border: 1px solid var(--border);

    border-radius: 9px;
}


.analise-detalhes > div {
    padding: 12px;

    background: var(--panel);
}


.analise-detalhes span {
    display: block;

    margin-bottom: 5px;

    color: #69737f;

    font-size: 8px;

    text-transform: uppercase;
}


.analise-detalhes strong {
    color: #ffffff;

    font-size: 11px;
}


.analise-concorrentes-bloco {
    padding: 0 18px 18px;
}


.analise-concorrentes-titulo {
    margin-bottom: 10px;
}


.analise-concorrentes-titulo h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 13px;
}


.analise-concorrentes-titulo p {
    margin: 0;

    color: #69737f;

    font-size: 9px;
}


.analise-concorrente {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 11px 0;

    border-bottom:
        1px solid var(--border);
}


.analise-concorrente:last-child {
    border-bottom: none;
}


.analise-concorrente div {
    min-width: 0;
}


.analise-concorrente div strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.analise-concorrente div span {
    color: #69737f;

    font-size: 8px;
}


.analise-concorrente > strong {
    flex-shrink: 0;

    color: var(--orange);

    font-size: 11px;
}


.analise-sem-concorrentes {
    padding: 15px;

    border: 1px dashed var(--border);

    border-radius: 8px;

    color: #69737f;

    font-size: 10px;

    text-align: center;
}


@media (max-width: 850px) {

    .analise-cards {
        grid-template-columns: 1fr 1fr;
    }

    .analise-detalhes {
        grid-template-columns: 1fr 1fr;
    }

}
/* =========================================
   MELHORIA VISUAL DO SELETOR DE ANÚNCIOS
========================================= */

.analise-pesquisa-campo select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.015)
        );

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    padding: 13px 42px 13px 14px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.analise-pesquisa-campo select:hover {
    border-color: rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.035);
}


.analise-pesquisa-campo select:focus {
    border-color: rgba(255, 90, 31, 0.45);

    box-shadow:
        0 0 0 3px rgba(255, 90, 31, 0.06);

    outline: none;
}


.analise-pesquisa-campo {
    position: relative;
}


.analise-pesquisa-campo::after {
    content: "⌄";

    position: absolute;

    right: 14px;
    bottom: 13px;

    color: #8b949e;

    font-size: 15px;

    pointer-events: none;
}


/* OPÇÕES */

.analise-pesquisa-campo select option {
    background: #d9dde2;

    color: #15191f;
}
/* =========================================
   SELETOR PESQUISÁVEL - ANÁLISES
========================================= */

.seletor-anuncio {
    position: relative;
    width: 100%;
}


.seletor-anuncio input[type="text"] {
    width: 100%;

    padding: 13px 14px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 9px;

    outline: none;

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.seletor-anuncio input[type="text"]:focus {
    border-color: rgba(255, 90, 31, 0.45);

    background: rgba(255, 255, 255, 0.035);
}


/* LISTA */

.lista-anuncios-analise {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;
    right: 0;

    z-index: 100;

    display: none;

    max-height: 340px;

    overflow-y: auto;

    background: #d9dde2;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 9px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);
}


.lista-anuncios-analise.ativo {
    display: block;
}


/* ITEM */

.item-anuncio-analise {
    padding: 11px 13px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    color: #171a1f;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.item-anuncio-analise:last-child {
    border-bottom: none;
}


.item-anuncio-analise:hover {
    background: #c8cdd3;
}


.item-anuncio-analise.selecionado {
    background: #bcc2c9;
}


.item-anuncio-analise strong {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;
}


.item-anuncio-analise span {
    font-size: 9px;

    color: #565d66;
}


/* SEM RESULTADOS */

.sem-anuncio-analise {
    padding: 15px;

    color: #555d66;

    font-size: 10px;

    text-align: center;
}
/* =========================================
   CONCLUSÃO AUTOMÁTICA DA ANÁLISE
========================================= */

.analise-conclusao {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 18px 18px 0;
    padding: 14px 15px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.02);
}


.analise-conclusao-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;
}


.analise-conclusao strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 11px;
}


.analise-conclusao p {
    margin: 0;

    color: #7c8692;

    font-size: 10px;

    line-height: 1.6;
}


/* OPORTUNIDADE */

.analise-conclusao.oportunidade {
    border-color: rgba(45, 190, 120, 0.30);

    background:
        rgba(45, 190, 120, 0.04);
}


.analise-conclusao.oportunidade
.analise-conclusao-icone {
    background:
        rgba(45, 190, 120, 0.12);

    color: #42c98a;
}


/* ATENÇÃO */

.analise-conclusao.atencao {
    border-color: rgba(255, 170, 45, 0.30);

    background:
        rgba(255, 170, 45, 0.04);
}


.analise-conclusao.atencao
.analise-conclusao-icone {
    background:
        rgba(255, 170, 45, 0.12);

    color: #f0ad45;
}


/* NEUTRA */

.analise-conclusao.neutra
.analise-conclusao-icone {
    background:
        rgba(255, 255, 255, 0.06);

    color: #9aa3ad;
}
/* =========================================
   FILTROS - ANÁLISES
========================================= */

.filtros-analise {
    display: flex;
    gap: 8px;
    margin-top: 9px;
}

.filtros-analise select {
    flex: 1;

    padding: 9px 10px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 8px;

    color: #cbd1d8;

    font-family: inherit;
    font-size: 9px;

    outline: none;

    cursor: pointer;
}

.filtros-analise select:focus {
    border-color: rgba(255, 90, 31, 0.45);
}

.filtros-analise option {
    background: #d9dde2;
    color: #171a1f;
}

@media (max-width: 650px) {

    .filtros-analise {
        flex-direction: column;
    }

}
/* =========================================
   FERRAMENTAS / FILTROS DE PRODUTOS
========================================= */

.produtos-ferramentas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}


/* BUSCA */

.busca-produtos {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 500px;
}

.busca-produtos span {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #7b8494;
    pointer-events: none;
}

.busca-produtos input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 46px;

    border: 1px solid #e1e5eb;
    border-radius: 12px;

    font-size: 14px;
    color: #1e293b;

    outline: none;

    transition: 0.2s;
}

.busca-produtos input:focus {
    border-color: #3483fa;

    box-shadow:
        0 0 0 3px rgba(52, 131, 250, 0.12);
}


/* FILTROS */

.filtros-analise {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.grupo-filtro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grupo-filtro label {
    font-size: 12px;
    font-weight: 600;

    color: #64748b;
}

.grupo-filtro select {
    min-width: 150px;
    height: 48px;

    padding: 0 38px 0 14px;

    border: 1px solid #e1e5eb;
    border-radius: 12px;

    background: #ffffff;

    font-size: 14px;
    color: #334155;

    cursor: pointer;
    outline: none;

    transition: 0.2s;
}

.grupo-filtro select:focus {
    border-color: #3483fa;

    box-shadow:
        0 0 0 3px rgba(52, 131, 250, 0.12);
}


/* RESPONSIVO */

@media (max-width: 768px) {

    .produtos-ferramentas {
        align-items: stretch;
        flex-direction: column;
    }

    .busca-produtos {
        max-width: none;
        width: 100%;
    }

    .filtros-analise {
        width: 100%;
    }

    .grupo-filtro {
        flex: 1;
    }

    .grupo-filtro select {
        width: 100%;
    }
}
/* =========================================
   CORREÇÃO FINAL - BUSCA E FILTROS PRODUTOS
========================================= */

#buscarProduto,
#filtroStatusProduto,
#filtroReferenciaProduto {

    background: #1c2028 !important;

    color: #f59e0b !important;

    border: 1px solid rgba(245, 158, 11, 0.25) !important;

    border-radius: 12px !important;

    height: 48px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    outline: none !important;

}


/* TEXTO DA BUSCA */

#buscarProduto {
    padding-left: 46px !important;
}


/* PLACEHOLDER */

#buscarProduto::placeholder {

    color: #a87322 !important;

    opacity: 1 !important;

}


/* SELECTS */

#filtroStatusProduto,
#filtroReferenciaProduto {

    cursor: pointer !important;

}


/* AO PASSAR O MOUSE */

#buscarProduto:hover,
#filtroStatusProduto:hover,
#filtroReferenciaProduto:hover {

    background: #222730 !important;

    border-color: rgba(245, 158, 11, 0.45) !important;

}


/* AO CLICAR / SELECIONAR */

#buscarProduto:focus,
#filtroStatusProduto:focus,
#filtroReferenciaProduto:focus {

    background: #222730 !important;

    border-color: #f59e0b !important;

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.10) !important;

}


/* OPÇÕES DOS SELECTS */

#filtroStatusProduto option,
#filtroReferenciaProduto option {

    background: #1c2028 !important;

    color: #f59e0b !important;

}


/* LABELS */

.filtros-produtos .grupo-filtro label {

    color: #f59e0b !important;

    font-weight: 600 !important;

}


/* ÍCONE DA BUSCA */

.busca-produtos span {

    color: #f59e0b !important;

}
/* =========================================
   TEMA CLARO
========================================= */

[data-theme="claro"] {

    --bg: #f4f6f8;

    --sidebar: #ffffff;

    --panel: #ffffff;

    --panel-2: #f5f7fa;

    --border: #dfe3e8;


    --text: #17191d;

    --muted: #68707c;


    --orange: #f59e0b;

    --orange-soft:
        rgba(245, 158, 11, 0.12);


    --green: #16a565;

    --green-soft:
        rgba(22, 165, 101, 0.12);


    --red: #e5484d;

    --yellow: #d99a00;

}
/* =========================================
   BOTÃO DE TEMA
========================================= */

.topbar-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-tema {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--panel);
    color: var(--text);

    font-size: 18px;

    cursor: pointer;

    transition: 0.2s;
}

.btn-tema:hover {
    border-color: var(--orange);
    transform: translateY(-1px);
}
/* =========================================
   TEMA CLARO
========================================= */

[data-theme="claro"] {
    --bg: #f4f6f8;
    --sidebar: #ffffff;
    --panel: #ffffff;
    --panel-2: #f1f3f5;
    --border: #d9dee5;

    --text: #17191d;
    --muted: #68707c;

    --orange: #f59e0b;
    --orange-soft: rgba(245, 158, 11, 0.12);

    --green: #16a565;
    --green-soft: rgba(22, 165, 101, 0.12);

    --red: #e5484d;
    --yellow: #d99a00;
}
/* =========================================
   TEMA CLARO - AJUSTES COMPLETOS
========================================= */


/* =========================================
   BASE
========================================= */

[data-theme="claro"] body {
    background: var(--bg);
    color: var(--text);
}

[data-theme="claro"] .main-content {
    color: var(--text);
}

[data-theme="claro"] h1,
[data-theme="claro"] h2,
[data-theme="claro"] h3,
[data-theme="claro"] strong {
    color: var(--text);
}


/* =========================================
   MENU LATERAL
========================================= */

[data-theme="claro"] .sidebar {
    background: #ffffff;
    border-color: #d9dee5;
}

[data-theme="claro"] .menu-item {
    color: #68707c;
}

[data-theme="claro"] .menu-item:hover {
    background: #f1f3f5;
    color: #17191d;
}

[data-theme="claro"] .menu-item.ativo {
    background: var(--orange-soft);
    color: var(--orange);
}

[data-theme="claro"] .sidebar-footer p {
    color: #8a929d;
}


/* =========================================
   TOPO
========================================= */

[data-theme="claro"] .topbar h1 {
    color: #17191d;
}

[data-theme="claro"] .topbar p {
    color: #68707c;
}

[data-theme="claro"] .topbar-status {
    color: #68707c;
}

[data-theme="claro"] .btn-tema {
    background: #ffffff;
    color: #17191d;
    border-color: #d9dee5;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05);
}


/* =========================================
   PAINÉIS GERAIS
========================================= */

[data-theme="claro"] .panel,
[data-theme="claro"] .resultado-panel,
[data-theme="claro"] .smart-price-panel,
[data-theme="claro"] .simulator-panel,
[data-theme="claro"] .marketplace-card,
[data-theme="claro"] .produto-resumo-card,
[data-theme="claro"] .produtos-lista,
[data-theme="claro"] .dashboard-card,
[data-theme="claro"] .dashboard-produtos,
[data-theme="claro"] .analise-pesquisa,
[data-theme="claro"] .analise-resultados {
    background: #ffffff;
    border-color: #d9dee5;

    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.035);
}


/* =========================================
   MARKETPLACES
========================================= */

[data-theme="claro"] .marketplace-card {
    color: #17191d;
}

[data-theme="claro"] .marketplace-card.ativo {
    background: #ffffff;
}

[data-theme="claro"] .preco-marketplace-card.ativo {
    background: #ffffff;
}

[data-theme="claro"] .marketplace-info strong {
    color: #17191d;
}

[data-theme="claro"] .marketplace-info span {
    color: #68707c;
}

[data-theme="claro"] .marketplace-card:hover {
    background: #fafbfc;
    border-color: #c5ccd5;
}


/* =========================================
   CAMPOS DA CALCULADORA
========================================= */

[data-theme="claro"] .form-group label,
[data-theme="claro"] .target-input label {
    color: #59616d;
}

[data-theme="claro"] .form-group > input {
    background: #f7f8fa;
    color: #17191d;

    border-color: #d5dae1;
}

[data-theme="claro"] .form-group > input::placeholder {
    color: #9ba3ad;
}

[data-theme="claro"] .input-wrapper {
    background: #f7f8fa;
    border-color: #d5dae1;
}

[data-theme="claro"] .input-wrapper input {
    color: #17191d;
}

[data-theme="claro"] .input-wrapper span {
    color: #747d88;
}


/* =========================================
   RESULTADOS
========================================= */

[data-theme="claro"] .resultado-resumo div {
    background: #f7f8fa;
    border-color: #e0e4e9;
}

[data-theme="claro"] .resultado-resumo strong {
    color: #17191d;
}

[data-theme="claro"] .resultado-resumo .destaque strong {
    color: var(--green);
}

[data-theme="claro"] .tax-preview strong {
    color: #3f4752;
}

[data-theme="claro"] .margem-bar,
[data-theme="claro"] .composicao-bar {
    background: #e4e7eb;
}

[data-theme="claro"] .lucro-principal p {
    color: #858e98;
}


/* =========================================
   PREÇO INTELIGENTE
========================================= */

[data-theme="claro"] .meta-lucro-btn {
    background: #f7f8fa;
    color: #68707c;
}

[data-theme="claro"] .meta-lucro-btn:hover {
    color: #17191d;
    border-color: #aeb6c0;
}

[data-theme="claro"] .meta-lucro-btn.ativo {
    background: rgba(245, 158, 11, 0.10);
    color: var(--orange);
}

[data-theme="claro"] .preco-estrategico-card {
    background: #ffffff;
}

[data-theme="claro"] .preco-estrategico-card strong {
    color: #17191d;
}

[data-theme="claro"] .preco-estrategico-card p {
    color: #68707c;
}

[data-theme="claro"] .preco-estrategico-card.sugerido {
    background:
        linear-gradient(
            135deg,
            rgba(22, 165, 101, 0.07),
            #ffffff 55%
        );
}

[data-theme="claro"] .resultado-preco-sugerido {
    border-color: #e1e5ea;
}

[data-theme="claro"] .resultado-preco-sugerido strong {
    color: #17191d;
}


/* =========================================
   DASHBOARD
========================================= */

[data-theme="claro"] .dashboard-boas-vindas h2,
[data-theme="claro"] .dashboard-bloco-titulo h2 {
    color: #17191d;
}

[data-theme="claro"] .dashboard-boas-vindas p,
[data-theme="claro"] .dashboard-bloco-titulo p {
    color: #68707c;
}

[data-theme="claro"] .dashboard-card strong {
    color: #17191d;
}

[data-theme="claro"] .dashboard-card span,
[data-theme="claro"] .dashboard-card small {
    color: #68707c;
}

[data-theme="claro"] .dashboard-atalho {
    background: #ffffff;
    border-color: #d9dee5;
}

[data-theme="claro"] .dashboard-atalho:hover {
    background: #faf7f2;
}

[data-theme="claro"] .dashboard-atalho strong {
    color: #17191d;
}

[data-theme="claro"] .dashboard-atalho span {
    color: #68707c;
}

[data-theme="claro"] .dashboard-produto-item {
    border-color: #e1e5ea;
}

[data-theme="claro"] .dashboard-produto-foto {
    background: #f4f5f7;
}

[data-theme="claro"] .dashboard-produto-dados strong,
[data-theme="claro"] .dashboard-produto-custo strong {
    color: #17191d;
}

[data-theme="claro"] .dashboard-produto-dados span,
[data-theme="claro"] .dashboard-produto-custo span,
[data-theme="claro"] .dashboard-vazio {
    color: #68707c;
}


/* =========================================
   MEUS PRODUTOS
========================================= */

[data-theme="claro"] .produtos-topo h2 {
    color: #17191d;
}

[data-theme="claro"] .produtos-topo p {
    color: #68707c;
}

[data-theme="claro"] .produto-resumo-card strong {
    color: #17191d;
}

[data-theme="claro"] .produto-resumo-card span,
[data-theme="claro"] .produto-resumo-card small {
    color: #68707c;
}


/* BUSCA */

[data-theme="claro"] .produtos-ferramentas {
    background: #ffffff;
    border-color: #d9dee5;
}

[data-theme="claro"] .busca-produtos {
    background: #ffffff;
    border-color: #d9dee5;
}

[data-theme="claro"] .busca-produtos input,
[data-theme="claro"] .grupo-filtro select {
    background: #f7f8fa;
    color: #17191d;

    border-color: #d5dae1;
}

[data-theme="claro"] .busca-produtos input::placeholder {
    color: #9099a4;
}

[data-theme="claro"] .grupo-filtro label {
    color: #68707c;
}

[data-theme="claro"] .grupo-filtro select option {
    background: #ffffff;
    color: #17191d;
}


/* LISTA */

[data-theme="claro"] .produto-item:hover {
    background: #fafbfc;
}

[data-theme="claro"] .produto-item-info strong,
[data-theme="claro"] .produto-item-valor strong {
    color: #17191d;
}

[data-theme="claro"] .produto-item-info span,
[data-theme="claro"] .produto-item-valor span {
    color: #68707c;
}

[data-theme="claro"] .produtos-vazio h3 {
    color: #17191d;
}

[data-theme="claro"] .produtos-vazio p {
    color: #68707c;
}


/* =========================================
   MODAL DE PRODUTO
========================================= */

[data-theme="claro"] .modal-produto-overlay {
    background: rgba(15, 23, 42, 0.35);
}

[data-theme="claro"] .modal-produto-conteudo {
    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.18);
}

[data-theme="claro"] .modal-produto-header h2 {
    color: #17191d;
}

[data-theme="claro"] .modal-produto-header p {
    color: #68707c;
}

[data-theme="claro"] .modal-produto-fechar {
    color: #68707c;
}

[data-theme="claro"] .modal-produto-fechar:hover {
    color: #17191d;
}


/* CAMPOS DO MODAL */

[data-theme="claro"] .produto-form-campo label {
    color: #59616d;
}

[data-theme="claro"] .produto-form-campo > input,
[data-theme="claro"] .produto-form-campo select {
    background: #f7f8fa;
    color: #17191d;

    border-color: #d5dae1;
}

[data-theme="claro"] .produto-form-campo select option {
    background: #ffffff;
    color: #17191d;
}

[data-theme="claro"] .produto-input-prefixo {
    background: #f7f8fa;
    border-color: #d5dae1;
}

[data-theme="claro"] .produto-input-prefixo input {
    color: #17191d;
}

[data-theme="claro"] .produto-foto-area {
    background: #f8f9fa;
}

[data-theme="claro"] .produto-foto-preview {
    background: #ffffff;

    border-color: #c8ced6;
}

[data-theme="claro"] .produto-foto-info label {
    color: #17191d;
}

[data-theme="claro"] .produto-foto-info p,
[data-theme="claro"] .produto-foto-info small {
    color: #68707c;
}

[data-theme="claro"] .btn-remover-foto:hover {
    color: #17191d;
}

[data-theme="claro"] .btn-cancelar-produto {
    color: #68707c;
}

[data-theme="claro"] .btn-cancelar-produto:hover {
    color: #17191d;
}


/* =========================================
   ANÁLISES
========================================= */

[data-theme="claro"] .analises-cabecalho h2 {
    color: #17191d;
}

[data-theme="claro"] .analises-cabecalho p {
    color: #68707c;
}

[data-theme="claro"] .analise-pesquisa-campo label {
    color: #68707c;
}

[data-theme="claro"] .analise-pesquisa-campo input,
[data-theme="claro"] .analise-pesquisa-campo select,
[data-theme="claro"] .seletor-anuncio input[type="text"] {
    background: #f7f8fa;
    color: #17191d;

    border-color: #d5dae1;
}

[data-theme="claro"] .analise-pesquisa-campo input::placeholder,
[data-theme="claro"] .seletor-anuncio input[type="text"]::placeholder {
    color: #9099a4;
}

[data-theme="claro"] .analise-pesquisa-campo select option {
    background: #ffffff;
    color: #17191d;
}


/* LISTA DE ANÚNCIOS */

[data-theme="claro"] .lista-anuncios-analise {
    background: #ffffff;

    border-color: #d9dee5;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.10);
}

[data-theme="claro"] .item-anuncio-analise {
    color: #17191d;

    border-color: #e4e7eb;
}

[data-theme="claro"] .item-anuncio-analise:hover {
    background: #f2f4f6;
}

[data-theme="claro"] .item-anuncio-analise.selecionado {
    background: #eceff2;
}

[data-theme="claro"] .item-anuncio-analise span,
[data-theme="claro"] .sem-anuncio-analise {
    color: #68707c;
}


/* RESULTADO DA ANÁLISE */

[data-theme="claro"] .analise-estado-inicial strong {
    color: #17191d;
}

[data-theme="claro"] .analise-estado-inicial p {
    color: #68707c;
}

[data-theme="claro"] .analise-produto-header h3 {
    color: #17191d;
}

[data-theme="claro"] .analise-card {
    background: #f7f8fa;
}

[data-theme="claro"] .analise-card span {
    color: #68707c;
}

[data-theme="claro"] .analise-card strong {
    color: #17191d;
}

[data-theme="claro"] .analise-detalhes {
    background: #d9dee5;
    border-color: #d9dee5;
}

[data-theme="claro"] .analise-detalhes > div {
    background: #ffffff;
}

[data-theme="claro"] .analise-detalhes span {
    color: #68707c;
}

[data-theme="claro"] .analise-detalhes strong {
    color: #17191d;
}

[data-theme="claro"] .analise-conclusao {
    background: #f7f8fa;
}


/* =========================================
   BARRAS E ELEMENTOS SECUNDÁRIOS
========================================= */

[data-theme="claro"] .footer {
    color: #7c8590;
}

[data-theme="claro"] .slider-scale {
    color: #7c8590;
}
/* =========================================
   TEMA CLARO - BUSCA E FILTROS MEUS PRODUTOS
========================================= */

[data-theme="claro"] #buscarProduto,
[data-theme="claro"] #filtroStatusProduto,
[data-theme="claro"] #filtroReferenciaProduto {

    background: #f7f8fa !important;

    color: #17191d !important;

    border: 1px solid #d5dae1 !important;
}


/* PLACEHOLDER */

[data-theme="claro"] #buscarProduto::placeholder {

    color: #9099a4 !important;

    opacity: 1 !important;
}


/* HOVER */

[data-theme="claro"] #buscarProduto:hover,
[data-theme="claro"] #filtroStatusProduto:hover,
[data-theme="claro"] #filtroReferenciaProduto:hover {

    background: #ffffff !important;

    border-color: #b8c0ca !important;
}


/* FOCO */

[data-theme="claro"] #buscarProduto:focus,
[data-theme="claro"] #filtroStatusProduto:focus,
[data-theme="claro"] #filtroReferenciaProduto:focus {

    background: #ffffff !important;

    border-color: var(--orange) !important;

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.10) !important;
}


/* OPÇÕES DOS SELECTS */

[data-theme="claro"] #filtroStatusProduto option,
[data-theme="claro"] #filtroReferenciaProduto option {

    background: #ffffff !important;

    color: #17191d !important;
}


/* LABELS */

[data-theme="claro"] .filtros-produtos .grupo-filtro label {

    color: #59616d !important;
}


/* ÍCONE DA BUSCA */

[data-theme="claro"] .busca-produtos span {

    color: #68707c !important;
}
/* =========================================
   AJUSTE FINAL DO TOPO
========================================= */

.topbar {
    width: 100%;
}

.topbar > div:first-child {
    min-width: 0;
}

.topbar-acoes {
    margin-left: auto;
    flex-shrink: 0;
    justify-content: flex-end;
}

.btn-tema {
    flex-shrink: 0;
}


/* =========================================
   ANÁLISES - NOVO LAYOUT PROFISSIONAL
========================================= */

.analises-section {
    width: 100%;
    max-width: 1200px;
}


/* CABEÇALHO */

.analises-cabecalho {
    margin-bottom: 22px;
}

.analises-cabecalho h2 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 21px;
    font-weight: 700;
}

.analises-cabecalho p {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================
   BLOCO DE SELEÇÃO DO ANÚNCIO
========================================= */

.analise-pesquisa {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px;

    align-items: end;

    gap: 14px;

    padding: 20px;

    margin-bottom: 14px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 14px;
}


/* CAMPO PRINCIPAL */

.analise-pesquisa-campo {
    min-width: 0;
}

.analise-pesquisa-campo label,
.analise-filtro-status label,
.analise-custo-campo label {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}


/* BUSCA */

.seletor-anuncio input[type="text"] {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    background: var(--panel-2);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.seletor-anuncio input[type="text"]:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px var(--orange-soft);
}


/* =========================================
   FILTRO STATUS
========================================= */

.analise-filtro-status {
    min-width: 0;
}

.analise-filtro-status select {
    width: 100%;
    height: 46px;

    padding: 0 12px;

    background: var(--panel-2);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;

    cursor: pointer;
}

.analise-filtro-status select:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px var(--orange-soft);
}


/* =========================================
   CUSTO DO PRODUTO
========================================= */

.analise-custo-produto {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 20px;

    margin-bottom: 14px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 14px;
}

.analise-custo-info {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    min-width: 0;
}

.analise-custo-info h3 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;
}

.analise-custo-info p {
    max-width: 500px;

    margin: 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.55;
}


.analise-custo-campo {
    width: 220px;

    flex-shrink: 0;
}

.analise-custo-campo .input-wrapper {
    height: 46px;

    background: var(--panel-2);

    border-color: var(--border);
}

.analise-custo-campo .input-wrapper input {
    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   BOTÕES
========================================= */

.analise-acoes {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-bottom: 22px;
}


.btn-analisar-mercado,
.btn-analise-preco-inteligente {
    height: 44px;

    padding: 0 18px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* BOTÃO PRINCIPAL */

.btn-analisar-mercado {
    border: 1px solid var(--orange);

    background: var(--orange);

    color: #ffffff;

    box-shadow:
        0 5px 18px rgba(245, 158, 11, 0.12);
}

.btn-analisar-mercado:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 20px rgba(245, 158, 11, 0.20);
}


/* PREÇO INTELIGENTE */

.btn-analise-preco-inteligente {
    border: 1px solid var(--border);

    background: var(--panel);

    color: var(--text);
}

.btn-analise-preco-inteligente:hover {
    transform: translateY(-1px);

    border-color: var(--orange);

    color: var(--orange);
}


/* =========================================
   RESULTADOS
========================================= */

.analise-resultados {
    min-height: 230px;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 15px;
}


/* ESTADO INICIAL */

.analise-estado-inicial {
    min-height: 260px;
}

.analise-estado-icone {
    width: 54px;
    height: 54px;

    margin-bottom: 15px;

    border-radius: 14px;

    background: var(--orange-soft);

    color: var(--orange);

    font-size: 21px;
    font-weight: 800;
}

.analise-estado-inicial strong {
    margin-bottom: 7px;

    color: var(--text);

    font-size: 14px;
}

.analise-estado-inicial p {
    max-width: 400px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================
   CONCLUSÃO / STATUS DA RENTABILIDADE
========================================= */

.analise-conclusao {
    margin: 20px 20px 0;

    padding: 16px 18px;

    border-radius: 12px;

    background: var(--panel-2);
}

.analise-conclusao > div:last-child {
    min-width: 0;
}

.analise-conclusao strong {
    display: block;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 13px;
}

.analise-conclusao p {
    margin: 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.5;
}


/* RENTÁVEL */

.analise-conclusao.oportunidade {
    border-color:
        rgba(53, 208, 127, 0.30);

    background:
        rgba(53, 208, 127, 0.055);
}

.analise-conclusao.oportunidade
.analise-conclusao-icone {
    color: var(--green);

    background:
        var(--green-soft);
}


/* ATENÇÃO */

.analise-conclusao.atencao {
    border-color:
        rgba(255, 200, 87, 0.30);

    background:
        rgba(255, 200, 87, 0.055);
}


/* =========================================
   NOME DO ANÚNCIO
========================================= */

.analise-produto-header {
    padding: 22px 20px 6px;
}

.analise-produto-header span {
    margin-bottom: 6px;

    color: var(--orange);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.analise-produto-header h3 {
    color: var(--text);

    font-size: 16px;
    line-height: 1.4;
}


/* =========================================
   CARDS PRINCIPAIS
========================================= */

.analise-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    padding: 15px 20px 20px;
}

.analise-card {
    position: relative;

    padding: 17px;

    background: var(--panel-2);

    border: 1px solid var(--border);

    border-radius: 11px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.analise-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(245, 158, 11, 0.35);
}

.analise-card span {
    margin-bottom: 8px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.analise-card strong {
    color: var(--text);

    font-size: 19px;
    font-weight: 700;
}

.analise-card small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
}


/* LUCRO E MARGEM MAIS DESTACADOS */

.analise-card:nth-child(5),
.analise-card:nth-child(6) {
    border-color:
        rgba(53, 208, 127, 0.28);

    background:
        rgba(53, 208, 127, 0.055);
}

.analise-card:nth-child(5) strong,
.analise-card:nth-child(6) strong {
    color: var(--green);
}


/* =========================================
   DETALHES
========================================= */

.analise-detalhes {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    margin: 0 20px 14px;

    overflow: hidden;

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 11px;
}

.analise-detalhes > div {
    padding: 14px;

    background: var(--panel);

    border-right: 1px solid var(--border);
}

.analise-detalhes > div:last-child {
    border-right: none;
}

.analise-detalhes span {
    margin-bottom: 6px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.analise-detalhes strong {
    color: var(--text);

    font-size: 11px;
}


/* =========================================
   LISTA DE ANÚNCIOS
========================================= */

.lista-anuncios-analise {
    max-height: 350px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 10px;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.25);
}

.item-anuncio-analise {
    padding: 12px 14px;

    color: var(--text);

    border-bottom: 1px solid var(--border);
}

.item-anuncio-analise:hover {
    background: var(--panel-2);
}

.item-anuncio-analise strong {
    color: var(--text);

    font-size: 11px;
}

.item-anuncio-analise span {
    color: var(--muted);

    font-size: 9px;
}


/* =========================================
   TEMA CLARO - ANÁLISES
========================================= */

[data-theme="claro"] .analise-pesquisa,
[data-theme="claro"] .analise-custo-produto,
[data-theme="claro"] .analise-resultados {
    background: #ffffff;

    box-shadow:
        0 2px 12px rgba(15, 23, 42, 0.04);
}

[data-theme="claro"]
.seletor-anuncio input[type="text"],

[data-theme="claro"]
.analise-filtro-status select,

[data-theme="claro"]
.analise-custo-campo .input-wrapper {
    background: #f7f8fa;

    color: #17191d;

    border-color: #d5dae1;
}

[data-theme="claro"] .analise-card {
    background: #f8f9fa;
}

[data-theme="claro"]
.analise-card:nth-child(5),

[data-theme="claro"]
.analise-card:nth-child(6) {
    background:
        rgba(22, 165, 101, 0.06);
}

[data-theme="claro"]
.analise-detalhes > div {
    background: #ffffff;
}

[data-theme="claro"]
.lista-anuncios-analise {
    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.12);
}

[data-theme="claro"]
.item-anuncio-analise:hover {
    background: #f4f6f8;
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 850px) {

    .analise-pesquisa {
        grid-template-columns: 1fr;
    }

    .analise-custo-produto {
        align-items: stretch;

        flex-direction: column;
    }

    .analise-custo-campo {
        width: 100%;
    }

    .analise-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .analise-detalhes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .analise-detalhes > div:nth-child(2) {
        border-right: none;
    }

}


@media (max-width: 550px) {

    .analise-cards {
        grid-template-columns: 1fr;
    }

    .analise-detalhes {
        grid-template-columns: 1fr;
    }

    .analise-detalhes > div {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .analise-acoes {
        flex-direction: column;
    }

    .btn-analisar-mercado,
    .btn-analise-preco-inteligente {
        width: 100%;
    }

}
.dashboard-produto-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-produto-plataforma {
    width: 30px;
    height: 30px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-produto-plataforma img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.dashboard-produto-foto {
    width: 56px;
    height: 56px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f8fa;
    border: 1px solid #e2e6eb;
    border-radius: 10px;
    overflow: hidden;
}

.dashboard-produto-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dashboard-anuncio-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-anuncio-status.ativo {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.dashboard-anuncio-status.pausado {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.dashboard-anuncio-status.outro {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}
/* =========================================
   ANÚNCIOS RECENTES - VISUAL PREMIUM
========================================= */

.dashboard-produtos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-produto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 14px 16px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 12px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dashboard-produto-item:hover {
    transform: translateY(-2px);

    border-color: rgba(249, 115, 22, 0.45);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.12);
}


/* ÁREA ESQUERDA */

.dashboard-produto-info {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
    flex: 1;
}


/* LOGO DA PLATAFORMA */

.dashboard-produto-plataforma {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;
}

.dashboard-produto-plataforma img {
    width: 27px;
    height: 27px;

    object-fit: contain;
}


/* FOTO DO ANÚNCIO */

.dashboard-produto-foto {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border);
    border-radius: 10px;
}

.dashboard-produto-foto img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* TÍTULO E ID */

.dashboard-produto-dados {
    min-width: 0;
    flex: 1;
}

.dashboard-produto-dados strong {
    display: block;

    margin-bottom: 6px;

    overflow: hidden;

    font-size: 12px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-produto-dados span {
    display: block;

    font-size: 9px;

    opacity: 0.65;
}


/* PREÇO E STATUS */

.dashboard-produto-custo {
    min-width: 180px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    flex-shrink: 0;

    text-align: right;
}

.dashboard-produto-custo strong {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-produto-custo .dashboard-anuncio-status {
    flex-shrink: 0;
    white-space: nowrap;
}

.dashboard-produto-custo strong {
    font-size: 16px;
    font-weight: 800;
}
/* =========================================
   SELO DA PLATAFORMA - MERCADO LIVRE
========================================= */

.dashboard-produto-plataforma {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #ffe600;
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);
}

.dashboard-produto-plataforma img {
    width: 26px;
    height: 26px;

    object-fit: contain;
}
.dashboard-anuncio-vendidos {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    width: fit-content;

    margin-top: 6px;

    padding: 4px 8px;

    border-radius: 7px;

    background: rgba(255, 159, 28, 0.10);

    border: 1px solid rgba(255, 159, 28, 0.18);

    color: #d98200;

    font-size: 10px;
    font-weight: 700;

    opacity: 1;
}
/* =========================================
   LOGIN - CALCULADORA PRO
========================================= */
/* Aplicação fica bloqueada até verificar o login */

.login-pagina {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 159, 28, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255, 107, 0, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #07090d 0%,
            #0b0f14 45%,
            #080b0f 100%
        );
}


.login-card {
    width: 100%;
    max-width: 430px;

    padding: 38px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        ),
        var(--panel);

    border:
        1px solid
        rgba(255, 159, 28, 0.14);

    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.015);

    backdrop-filter: blur(10px);
}


.login-logo {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ff9f1c,
            #ff6b00
        );

    color: #111111;

    font-size: 16px;
    font-weight: 900;
}
.login-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

.login-cabecalho {
    margin-bottom: 28px;
}


.login-cabecalho > span {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.login-cabecalho h1 {
    margin: 0 0 10px;

    font-size: 30px;
    line-height: 1.15;

    letter-spacing: -0.7px;
}


.login-cabecalho p {
    margin: 0;

    max-width: 360px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}


.login-campo {
    margin-bottom: 17px;
}


.login-campo label {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}


.login-campo input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    outline: none;

    background: #0b1016;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.login-campo input:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px
        rgba(255, 159, 28, 0.08);
}


.btn-login,
.btn-criar-conta {
    width: 100%;

    padding: 13px 16px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.btn-login {
    border: 1px solid var(--orange);

    background: var(--orange);

    color: #111111;
}


.btn-criar-conta {
    border: 1px solid var(--border);

    background: transparent;

    color: var(--text);
}


.login-divisor {
    position: relative;

    margin: 20px 0;

    text-align: center;
}


.login-divisor::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background: var(--border);
}


.login-divisor span {
    position: relative;

    padding: 0 12px;

    background: var(--panel);

    color: var(--muted);

    font-size: 10px;
}


.login-mensagem {
    min-height: 18px;

    margin-bottom: 10px;

    font-size: 11px;
    line-height: 1.4;
}
.btn-sair {
    padding: 9px 14px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.btn-sair:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}
/* =========================================
   ATUALIZAÇÃO DOS ANÚNCIOS - ANÁLISES
========================================= */

.analise-atualizacao {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 14px;
    margin-bottom: 20px;

    padding: 14px 16px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 12px;
}

.analise-atualizacao-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.analise-atualizacao-info span {
    font-size: 12px;
    font-weight: 700;
}

.analise-atualizacao-info small {
    color: var(--muted);

    font-size: 10px;
}

.btn-atualizar-anuncios {
    padding: 10px 14px;

    border: 1px solid var(--orange);
    border-radius: 9px;

    background: transparent;

    color: var(--orange);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

.btn-atualizar-anuncios:hover {
    background: var(--orange);

    color: #111111;
}

.btn-atualizar-anuncios:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}
/* =========================================
   DASHBOARD - ANÚNCIO CLICÁVEL
========================================= */

.dashboard-produto-item {
    cursor: pointer;
}
/* =========================================
   DASHBOARD - LINK DO ANÚNCIO
========================================= */

.dashboard-produto-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* =========================================
   MEUS PRODUTOS - IMPORTAR MERCADO LIVRE
========================================= */

.produtos-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-importar-mercadolivre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 16px;

    border-radius: 10px;
    border: 1px solid rgba(255, 193, 7, 0.30);

    background: rgba(255, 193, 7, 0.08);

    color: #f5b800;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.btn-importar-mercadolivre:hover {
    background: rgba(255, 193, 7, 0.14);
    border-color: rgba(255, 193, 7, 0.50);
    transform: translateY(-1px);
}

.btn-importar-mercadolivre:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
/* =========================================
   MEUS PRODUTOS - PAGINAÇÃO
========================================= */

.produtos-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 18px;
    padding: 22px 0 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.paginacao-numeros {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-pagina-produto {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;
    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: #8f98a3;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.btn-pagina-produto:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f7fa;
    transform: translateY(-1px);
}

.btn-pagina-produto.ativo {
    border-color: #3483fa;
    color: #3483fa;
    background: rgba(52, 131, 250, 0.06);
    font-weight: 700;
}

.btn-pagina-produto:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.paginacao-reticencias {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    height: 38px;

    color: #8f98a3;
    font-size: 14px;
    font-weight: 500;
}

#paginaAnteriorProdutos,
#proximaPaginaProdutos {
    min-width: auto;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #8f98a3;
}

#paginaAnteriorProdutos:hover:not(:disabled),
#proximaPaginaProdutos:hover:not(:disabled) {
    background: transparent;
    color: #3483fa;
    transform: none;
}
/* =========================================
   MEUS PRODUTOS - LISTA PROFISSIONAL
========================================= */

.produto-item {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) auto auto;
    align-items: center;
    gap: 24px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.015);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.produto-item + .produto-item {
    margin-top: 10px;
}

.produto-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}


/* =========================================
   INFORMAÇÕES DO PRODUTO
========================================= */

.produto-item-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.produto-item-plataforma {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.produto-item-plataforma img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.produto-item-foto {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.produto-item-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.produto-item-dados {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.produto-item-dados strong {
    color: #f4f6f8;
    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.produto-item-dados span {
    color: #89929d;
    font-size: 12px;
}

.produto-item-vendidos {
    color: #7d8792 !important;
}


/* =========================================
   MÉTRICAS
========================================= */

.produto-item-metricas {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, auto));
    align-items: center;
    gap: 22px;
}

.produto-item-metrica {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.produto-item-metrica span {
    color: #7f8994;
    font-size: 11px;
    white-space: nowrap;
}

.produto-item-metrica strong {
    color: #f5f7fa;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================
   STATUS
========================================= */

.produto-item-status {
    display: flex;
    justify-content: center;
}

.status-produto {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

.status-produto.ativo {
    color: #35d07f;
    background: rgba(53, 208, 127, 0.10);
    border: 1px solid rgba(53, 208, 127, 0.20);
}

.status-produto.pausado {
    color: #ffc857;
    background: rgba(255, 200, 87, 0.10);
    border: 1px solid rgba(255, 200, 87, 0.20);
}

.status-produto.outro {
    color: #9aa3ad;
    background: rgba(154, 163, 173, 0.08);
    border: 1px solid rgba(154, 163, 173, 0.16);
}


/* =========================================
   AÇÕES
========================================= */

.produto-item-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.produto-item-acoes button,
.produto-item-acoes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 0 11px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.btn-usar-produto,
.btn-preco-produto,
.btn-editar-produto {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #b4bcc5;
}

.btn-usar-produto:hover,
.btn-preco-produto:hover,
.btn-editar-produto:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.btn-ver-anuncio {
    background: rgba(52, 131, 250, 0.10);
    border: 1px solid rgba(52, 131, 250, 0.22);
    color: #4c91ff;
}

.btn-ver-anuncio:hover {
    background: rgba(52, 131, 250, 0.16);
    border-color: rgba(52, 131, 250, 0.35);
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 1200px) {

    .produto-item {
        grid-template-columns: 1fr;
    }

    .produto-item-metricas {
        grid-template-columns: repeat(4, 1fr);
    }

    .produto-item-acoes {
        justify-content: flex-start;
    }

}
/* =========================================
   AJUSTES - TEMA CLARO - MEUS PRODUTOS
========================================= */

html[data-theme="claro"] .produto-item {
    background: #ffffff;
    border-color: #dfe4ea;
}

html[data-theme="claro"] .produto-item:hover {
    background: #fbfcfd;
    border-color: #cfd6de;
}


/* TÍTULO */

html[data-theme="claro"] .produto-item-dados strong {
    color: #1f2933;
}


/* TEXTOS SECUNDÁRIOS */

html[data-theme="claro"] .produto-item-dados span,
html[data-theme="claro"] .produto-item-vendidos,
html[data-theme="claro"] .produto-item-metrica span {
    color: #66717d !important;
}


/* VALORES */

html[data-theme="claro"] .produto-item-metrica strong {
    color: #25303b;
}


/* LOGO / FOTO */

html[data-theme="claro"] .produto-item-plataforma,
html[data-theme="claro"] .produto-item-foto {
    background: #f7f8fa;
    border-color: #e1e5ea;
}


/* BOTÕES DE AÇÃO */

html[data-theme="claro"] .btn-usar-produto,
html[data-theme="claro"] .btn-preco-produto,
html[data-theme="claro"] .btn-editar-produto {
    color: #59636f;
    border-color: #d6dce2;
    background: #ffffff;
}

html[data-theme="claro"] .btn-usar-produto:hover,
html[data-theme="claro"] .btn-preco-produto:hover,
html[data-theme="claro"] .btn-editar-produto:hover {
    color: #1f2933;
    background: #f4f6f8;
    border-color: #bcc5cf;
}


/* VER ANÚNCIO */

html[data-theme="claro"] .btn-ver-anuncio {
    color: #2673e8;
    background: #f2f7ff;
    border-color: #b9d2fb;
}

html[data-theme="claro"] .btn-ver-anuncio:hover {
    background: #e8f1ff;
    border-color: #8db8f7;
}


/* STATUS */

html[data-theme="claro"] .status-produto.ativo {
    color: #179455;
    background: #e9f8f0;
    border-color: #b9ebd0;
}

html[data-theme="claro"] .status-produto.pausado {
    color: #a97800;
    background: #fff7dd;
    border-color: #f2df9a;
}

html[data-theme="claro"] .status-produto.outro {
    color: #5e6873;
    background: #f1f3f5;
    border-color: #d8dde2;
}


/* PAGINAÇÃO */

html[data-theme="claro"] .produtos-paginacao {
    border-top-color: #e3e7eb;
}

html[data-theme="claro"] .btn-pagina-produto {
    color: #59636f;
}

html[data-theme="claro"] .btn-pagina-produto:hover:not(:disabled) {
    color: #2673e8;
    background: #f4f7fb;
}

html[data-theme="claro"] .btn-pagina-produto.ativo {
    color: #2673e8;
    border-color: #2673e8;
    background: #f2f7ff;
}

html[data-theme="claro"] .paginacao-reticencias {
    color: #7a8590;
}
/* =========================================
   MEUS PRODUTOS - CABEÇALHO DA LISTA
========================================= */

.produtos-cabecalho {
    display: grid;

   grid-template-columns:
    minmax(0, 1.8fr)
    auto
    auto;

    align-items: center;
    gap: 24px;

    padding: 12px 20px;
    margin-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    color: #7f8994;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.produtos-cabecalho-metricas {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(80px, auto));

    align-items: center;
    gap: 22px;
}

.produtos-cabecalho-acoes {
    min-width: 420px;
    text-align: left;
}

html[data-theme="claro"] .produtos-cabecalho {
    color: #68737f;
    border-bottom-color: #dfe4ea;
}
/* =========================================
   MEUS PRODUTOS - BUSCA E STATUS
========================================= */

.produtos-filtros {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
}

.produtos-busca {
    position: relative;

    flex: 1;
    max-width: 620px;
}

.produtos-busca-icone {
    position: absolute;
    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #7f8994;
    font-size: 18px;

    pointer-events: none;
}

.produtos-busca input {
    width: 100%;
    height: 48px;

    padding: 0 16px 0 46px;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.02);

    color: #f5f7fa;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.produtos-busca input:focus {
    border-color: rgba(255, 153, 0, 0.55);
    background: rgba(255, 255, 255, 0.03);
}

.produtos-filtro-status {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 190px;
}

.produtos-filtro-status label {
    color: #8a949f;
    font-size: 12px;
    font-weight: 600;
}

.produtos-filtro-status select {
    height: 48px;

    padding: 0 14px;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.02);

    color: #f5f7fa;

    font-size: 14px;

    outline: none;
    cursor: pointer;
}


/* =========================================
   TEMA CLARO
========================================= */

html[data-theme="claro"] .produtos-busca input,
html[data-theme="claro"] .produtos-filtro-status select {
    background: #ffffff;
    border-color: #dfe4ea;
    color: #1f2933;
}

html[data-theme="claro"] .produtos-busca input:focus {
    border-color: #f59e0b;
    background: #ffffff;
}

html[data-theme="claro"] .produtos-busca-icone,
html[data-theme="claro"] .produtos-filtro-status label {
    color: #68737f;
}
/* =========================================
   CAMPOS SINCRONIZADOS - MERCADO LIVRE
========================================= */

.produto-form-campo input[readonly],
.produto-form-campo input:disabled,
.produto-form-campo select:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
    color: #9ca6b2;
}

.produto-form-campo input[readonly]:focus,
.produto-form-campo input:disabled:focus,
.produto-form-campo select:disabled:focus {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.08);
}


/* TEMA CLARO */

html[data-theme="claro"]
.produto-form-campo input[readonly],

html[data-theme="claro"]
.produto-form-campo input:disabled,

html[data-theme="claro"]
.produto-form-campo select:disabled {
    background: #f1f3f5;
    border-color: #dfe4ea;
    color: #7a8490;
}
/* =========================================
   LOGIN SEMPRE EM TEMA ESCURO
========================================= */

[data-theme="claro"] .login-pagina {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 159, 28, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255, 107, 0, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #07090d 0%,
            #0b0f14 45%,
            #080b0f 100%
        );
}

[data-theme="claro"] .login-card {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        ),
        #11161d;

    border-color:
        rgba(255, 159, 28, 0.14);
}

[data-theme="claro"] .login-cabecalho h1 {
    color: #f5f7fa;
}

[data-theme="claro"] .login-cabecalho p,
[data-theme="claro"] .login-campo label {
    color: #858e9b;
}

[data-theme="claro"] .login-campo input {
    background: #0b1016;
    color: #ffffff;
    border-color: #242c36;
}

[data-theme="claro"] .login-divisor span {
    background: #11161d;
    color: #858e9b;
}

[data-theme="claro"] .login-divisor::before {
    background: #242c36;
}

[data-theme="claro"] .btn-criar-conta {
    background: transparent;
    color: #f5f7fa;
    border-color: #242c36;
}
/* =========================================
   LOGIN - LAYOUT EM DUAS COLUNAS
========================================= */

.login-layout {
    width: 100%;
    max-width: 1080px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 430px);

    gap: 70px;

    align-items: center;
}

.login-apresentacao {
    max-width: 520px;
}

.login-apresentacao-label {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.6px;
}

.login-apresentacao h2 {
    margin: 0 0 18px;

    color: #f5f7fa;

    font-size: 46px;
    line-height: 1.05;

    letter-spacing: -1.4px;
}

.login-apresentacao p {
    max-width: 480px;

    margin: 0;

    color: #8a94a0;

    font-size: 15px;
    line-height: 1.8;
}

.login-card {
    justify-self: end;
}
@media (max-width: 900px) {

    .login-layout {
        max-width: 430px;

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .login-apresentacao {
        display: none;
    }

    .login-card {
        justify-self: stretch;
    }
}
/* =========================================
   LOGIN - BENEFÍCIOS
========================================= */

.login-beneficios {
    display: grid;
    gap: 14px;

    margin-top: 32px;
}

.login-beneficio {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 15px 16px;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 13px;
}

.login-beneficio-icone {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(255, 159, 28, 0.10);

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.login-beneficio strong {
    display: block;

    margin-bottom: 4px;

    color: #f5f7fa;

    font-size: 12px;
}

.login-beneficio small {
    display: block;

    color: #7d8793;

    font-size: 10px;
    line-height: 1.5;
}
/* =========================================
   LOGIN - CARD PROFISSIONAL
========================================= */

.login-card {
    position: relative;

    overflow: hidden;

    padding: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.015)
        ),
        #11161d;

    border:
        1px solid
        rgba(255, 159, 28, 0.15);

    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42);
}

.login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--orange),
            transparent
        );
}

.login-logo {
    width: 64px;
    height: 64px;

    margin-bottom: 22px;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(255, 159, 28, 0.16);
}

.login-cabecalho {
    margin-bottom: 26px;
}/* CAMPOS */

.login-campo {
    margin-bottom: 17px;
}

.login-campo label {
    display: block;

    margin-bottom: 7px;

    color: #9aa3ad;

    font-size: 11px;
    font-weight: 700;
}

.login-campo input {
    width: 100%;

    padding: 13px 14px;

    background: #0b1016;

    color: #ffffff;

    border: 1px solid #252d37;

    border-radius: 10px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.login-campo input:focus {
    border-color:
        rgba(255, 159, 28, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(255, 159, 28, 0.08);

    background: #0d1218;
}
/* BOTÕES */

.btn-login {
    width: 100%;

    margin-top: 8px;

    padding: 13px 18px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #ff9f1c,
            #ff7a00
        );

    color: #111111;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(255, 126, 0, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-login:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px
        rgba(255, 126, 0, 0.25);
}

.btn-criar-conta {
    width: 100%;

    padding: 12px 18px;

    background: transparent;

    color: #e7ebef;

    border:
        1px solid
        #29323c;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn-criar-conta:hover {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 159, 28, 0.35);
}
/* =========================================
   LOGIN - DIVISOR
========================================= */

.login-divisor {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 22px 0;
}

.login-divisor::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.10),
            transparent
        );
}

.login-divisor span {
    position: relative;

    padding: 0 12px;

    background: #11161d;

    color: #6f7883;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}
/* =========================================
   DASHBOARD - BOAS-VINDAS PREMIUM
========================================= */

.dashboard-boas-vindas {
    position: relative;

    padding: 26px 28px;

    margin-bottom: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 159, 28, 0.10),
            rgba(255, 159, 28, 0.02) 45%,
            rgba(255, 255, 255, 0.015)
        ),
        var(--panel);

    border:
        1px solid
        rgba(255, 159, 28, 0.16);

    border-radius: 16px;
}

.dashboard-boas-vindas::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -80px;

    border-radius: 50%;

    background:
        rgba(255, 159, 28, 0.08);

    filter: blur(10px);

    pointer-events: none;
}

.dashboard-boas-vindas h2 {
    position: relative;
    z-index: 1;

    margin-bottom: 7px;

    font-size: 24px;
    letter-spacing: -0.5px;
}

.dashboard-boas-vindas p {
    position: relative;
    z-index: 1;

    max-width: 620px;

    line-height: 1.6;
}[data-theme="claro"] .dashboard-boas-vindas {
    background:
        linear-gradient(
            135deg,
            rgba(255, 159, 28, 0.10),
            rgba(255, 255, 255, 0.95) 55%
        );

    border-color:
        rgba(255, 159, 28, 0.22);
}
/* =========================================
   DASHBOARD - CARDS DE INDICADORES
========================================= */

.dashboard-card {
    padding: 22px;

    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        ),
        var(--panel);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 159, 28, 0.28);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.16);
}

.dashboard-card::before {
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            rgba(255, 159, 28, 0.25)
        );

    opacity: 1;
}

.dashboard-card span {
    margin-bottom: 11px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.dashboard-card strong {
    margin-bottom: 7px;

    font-size: 27px;
    line-height: 1.1;

    letter-spacing: -0.5px;
}

.dashboard-card small {
    font-size: 10px;
    line-height: 1.5;
}
[data-theme="claro"] .dashboard-card {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfc
        );

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}

[data-theme="claro"] .dashboard-card:hover {
    border-color:
        rgba(255, 159, 28, 0.32);

    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.10);
}
/* =========================================
   DASHBOARD - ATALHOS PREMIUM
========================================= */

.dashboard-atalho {
    position: relative;

    padding: 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        ),
        var(--panel);

    overflow: hidden;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.08);
}

.dashboard-atalho::after {
    content: "→";

    position: absolute;

    right: 16px;

    color:
        rgba(255, 159, 28, 0.55);

    font-size: 16px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.dashboard-atalho:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 159, 28, 0.32);

    background:
        linear-gradient(
            180deg,
            rgba(255, 159, 28, 0.05),
            rgba(255, 159, 28, 0.015)
        ),
        var(--panel);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.14);
}

.dashboard-atalho:hover::after {
    transform: translateX(3px);

    color: var(--orange);
}
.dashboard-atalho-icone {
    width: 44px;
    height: 44px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 159, 28, 0.16),
            rgba(255, 159, 28, 0.05)
        );

    border:
        1px solid
        rgba(255, 159, 28, 0.14);

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.02);

    font-size: 17px;
}
.dashboard-atalho strong {
    margin-bottom: 5px;

    font-size: 13px;
}

.dashboard-atalho span {
    max-width: 200px;

    line-height: 1.5;

    font-size: 10px;
}
[data-theme="claro"] .dashboard-atalho {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfc
        );

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.05);
}

[data-theme="claro"] .dashboard-atalho:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fff8ef
        );

    border-color:
        rgba(255, 159, 28, 0.28);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08);
}
/* =========================================
   DASHBOARD - PRODUTOS RECENTES
========================================= */

.dashboard-produtos {
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.008)
        ),
        var(--panel);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.08);
}

.dashboard-produto-item {
    padding: 15px 18px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.dashboard-produto-item:hover {
    background:
        rgba(255, 159, 28, 0.025);
}
.dashboard-produto-foto {
    width: 50px;
    height: 50px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);
}
.dashboard-produto-dados strong {
    font-size: 12px;

    line-height: 1.4;
}

.dashboard-produto-dados span {
    margin-top: 4px;

    font-size: 10px;
}

.dashboard-produto-custo strong {
    font-size: 13px;
}

.dashboard-produto-custo span {
    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}
[data-theme="claro"] .dashboard-produtos {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfc
        );

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);
}

[data-theme="claro"] .dashboard-produto-item:hover {
    background: #fff9f1;
}

[data-theme="claro"] .dashboard-produto-foto {
    background: #f7f8fa;

    border-color: #e2e6eb;
}