/* Design System Profissional (Laranja) */
:root {
    --primary-color: #f97316;
    --secondary-color: #f59e0b;
    --tertiary-color: #fdba74;
    --background-color: #fff7ed;
    --sidebar-bg: rgba(255, 255, 255, 0.96);
    --text-color: #1f2937;
    --card-bg: #ffffff;
    --border-color: #f2e4d9;
    --solar-gradient: linear-gradient(135deg, #f97316, #f59e0b);
    --solar-gradient-2: linear-gradient(90deg, #f97316, #fb923c, #f59e0b);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    --shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.12);
    --ui-primary: #f97316;
    --ui-primary-dark: #ea580c;
    --ui-primary-weak: #fff1e6;
    --ui-accent: #f59e0b;
    --ui-surface: #ffffff;
    --ui-surface-variant: #fff7ed;
    --ui-border: #f2e4d9;
    --ui-text: #1f2937;
    --ui-text-muted: #6b7280;
    --ui-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.panel-badge {
    display: inline-block;
    margin-right: 0;
    font-weight: 600;
    color: var(--ui-primary);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 2px 6px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    font-size: 0.72rem;
    white-space: nowrap;
}

.panel,
.info-card,
.card,
.modal-content,
.tabs,
.tab-content {
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.tabs {
    background: transparent;
    border: none;
    box-shadow: none;
}

.tab-button {
    background: var(--ui-surface-variant);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
}

.tab-button.active {
    background: var(--ui-primary-weak);
    color: var(--ui-primary-dark);
    border-color: #f7c8a3;
}



/* Background com degradê laranja suave */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 55%, #f9fafb 100%);
    color: var(--ui-text);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

/* Header superior */
.page-hero {
    background: linear-gradient(90deg, #f97316 0%, #f59e0b 50%, #fb923c 100%);
    padding: 30px 16px;
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.25);
}

/* Botão para voltar ao dashboard no Sidebar */
.sidebar-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--primary-color);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 24px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.sidebar-back-btn i {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.sidebar-back-btn:hover {
    background: #ffedd5;
    border-color: var(--primary-color);
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.1);
}

.sidebar-back-btn:hover i {
    transform: translateX(-2px);
}

.page-hero-content {
    max-width: 920px;
    margin: 0 auto;
}

.page-hero h1 {
    margin: 8px 0 6px;
    font-size: 2.05rem;
}

.page-hero p {
    margin: 0;
    opacity: 0.95;
}

.hero-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

#particles-background {
    display: none;
}

#particles-background::before,
#particles-background::after {
    display: none;
}

.app-shell {
    background: transparent;
}

#sidebar.sidebar-fixed {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

.sidebar-title {
    color: var(--ui-text);
    margin-bottom: 14px;
    line-height: 1.2;
}

.sidebar-subtitle {
    color: var(--ui-text-muted);
    margin-top: 0;
    margin-bottom: 22px;
    line-height: 1.5;
}

.welcome-form .floating-input input,
.sidebar-form .floating-input input {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    box-shadow: none;
}

.welcome-form .floating-input input:focus,
.sidebar-form .floating-input input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.analyze-btn-welcome {
    background: var(--ui-primary);
    border: none;
    color: #fff;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.25);
}

.analyze-btn-welcome .btn-gradient {
    display: none;
}

.secondary-btn {
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    background: var(--ui-surface-variant);
}

.secondary-btn:hover {
    background: var(--ui-surface-variant);
}

.pre-analysis-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

.pre-hero-badge {
    background: var(--ui-primary-weak);
    color: var(--ui-primary-dark);
}

.pre-carousel {
    background: var(--ui-surface-variant);
    border: 1px solid var(--ui-border);
}

/* Garantir que o layout principal funcione corretamente */
body:not(.welcome-mode) {
    display: block;
    /* Mudança de flex para block */
    height: auto;
    /* Altura automática em vez de fixa */
    min-height: 100vh;
}

/* Quando está na tela de boas-vindas */
body.welcome-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Removido para melhorar performance */

@keyframes solarWave {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Partículas removidas para performance */

@keyframes simpleFloat {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: -50px -50px, 50px 50px;
    }
}

#particles-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg at 50% 50%,
            rgba(255, 107, 53, 0.1) 0deg,
            rgba(255, 193, 7, 0.15) 72deg,
            rgba(255, 64, 129, 0.1) 144deg,
            rgba(156, 39, 176, 0.12) 216deg,
            rgba(33, 150, 243, 0.08) 288deg,
            rgba(255, 107, 53, 0.1) 360deg);
    animation: holographicSpin 30s linear infinite;
    opacity: 0.6;
}

#particles-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 300px at 20% 30%, rgba(255, 193, 7, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 400px 200px at 80% 70%, rgba(255, 64, 129, 0.1) 0%, transparent 70%);
    /* Removendo animações pesadas */
}

/* Removendo partículas complexas para melhorar performance */

.welcome-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 24px;
    background:
        radial-gradient(ellipse 1000px 600px at 50% 50%, rgba(255, 193, 7, 0.08) 0%, transparent 80%),
        radial-gradient(ellipse 600px 400px at 30% 20%, rgba(255, 107, 53, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 800px 500px at 70% 80%, rgba(255, 64, 129, 0.04) 0%, transparent 70%);
    animation: atmosphericGlow 16s ease-in-out infinite;
}

/* Container com fundo harmonizado ao degradê laranja */
.welcome-container {
    width: 100%;
    max-width: 880px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 40px 32px;
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    /* Removendo animação do container para melhor performance */
}

.welcome-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--holo-solar);
    border-radius: 34px;
    z-index: -1;
    /* animation: holoBorder 6s ease-in-out infinite; */
    filter: blur(1px);
    opacity: 0.6;
}

.welcome-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.8) 20%,
            rgba(255, 193, 7, 0.9) 50%,
            rgba(255, 255, 255, 0.8) 80%,
            transparent 100%);
    /* animation: scanLine 3s ease-in-out infinite; */
}

@keyframes atmosphericGlow {

    0%,
    100% {
        filter: brightness(1) contrast(1);
    }

    50% {
        filter: brightness(1.1) contrast(1.05);
    }
}

@keyframes containerFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes holoBorder {

    0%,
    100% {
        opacity: 0.6;
        filter: blur(1px) hue-rotate(0deg);
    }

    50% {
        opacity: 0.9;
        filter: blur(0.5px) hue-rotate(15deg);
    }
}

@keyframes scanLine {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.solar-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.solar-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    /* filter removido */
}

/* Ícone do sol com cores laranjas */
.sun-icon {
    position: relative;
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    color: #ff6b35;
    margin-bottom: 20px;
}

.sun-icon i {
    font-size: 48px;
    background: linear-gradient(45deg, #ff4500, #ff6b35, #ffa726);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
}

@keyframes solarCore {

    0%,
    100% {
        transform: scale(1) rotate3d(0, 1, 0, 0deg);
        /* filter removido */
    }

    50% {
        transform: scale(1.05) rotate3d(0, 1, 0, 180deg);
        /* filter removido */
    }
}

@keyframes coreRotation {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
        /* filter removido */
    }

    25% {
        transform: rotate(90deg) scale(1.02);
        /* filter removido */
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        /* filter removido */
    }

    75% {
        transform: rotate(270deg) scale(1.02);
        /* filter removido */
    }
}

@keyframes raysSpin {
    to {
        transform: rotate(360deg);
        filter: hue-rotate(30deg);
    }
}

/* Título com degradê laranja */
.welcome-title {
    text-align: center;
    margin: 12px 0 16px;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gradient-text {
    /* Mudança para branco puro para melhor contraste */
    color: #ffffff;
    font-weight: 800;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 255, 255, 0.3);
}

.gradient-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 193, 7, 0.9) 50%,
            rgba(255, 255, 255, 0.8) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    opacity: 0;
    /* animation: textShimmer 3s ease-in-out infinite; */
}

.welcome-subtitle {
    text-align: center;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    animation: subtitleFloat 6s ease-in-out infinite;
}

@keyframes titleGlow {

    0%,
    100% {
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 193, 7, 0.4);
    }

    50% {
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(255, 193, 7, 0.6),
            0 0 50px rgba(255, 107, 53, 0.3);
    }
}

@keyframes holographicShift {

    0%,
    100% {
        background-position: 0% 50%;
        /* filter removido */
    }

    25% {
        background-position: 50% 0%;
        /* filter removido */
    }

    50% {
        background-position: 100% 50%;
        /* filter removido */
    }

    75% {
        background-position: 50% 100%;
        /* filter removido */
    }
}

@keyframes textShimmer {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }

    50% {
        opacity: 0.3;
        transform: translateX(100%);
    }
}

@keyframes subtitleFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

/* === NOVO: Toggle Residencial/Comercial === */
.property-type-toggle {
    display: flex;
    gap: 12px;
    margin: 0 auto 24px;
    max-width: 500px;
    background: #fff1e6;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid #f3d8c2;
}

.toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid #f3d8c2;
    background: #fff7ed;
    color: var(--ui-primary-dark);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.toggle-btn:hover:not(.active) {
    background: #ffe8d6;
    color: var(--ui-primary-dark);
}

.toggle-btn.active {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark));
    color: #fff;
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow:
        0 4px 12px rgba(249, 115, 22, 0.35),
        0 2px 6px rgba(249, 115, 22, 0.2);
    transform: translateY(-1px);
}

.toggle-btn.active i {
    transform: scale(1.1);
}

.welcome-form-container {
    margin: 8px auto 0;
    max-width: 760px;
    /* largura máxima do formulário para visual card-like */
}

.welcome-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    /* simétrico e adaptável */
    gap: 14px;
    align-items: start;
}

.floating-input {
    position: relative;
}

/* Inputs com tema laranja solar */
.floating-input input {
    width: 100%;
    padding: 16px 44px 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    outline: none;
    transition: border-color 0.2s ease;
    font-weight: 500;
}

.floating-input input::placeholder {
    color: transparent;
}

.floating-input input:focus {
    border-color: rgba(255, 107, 53, 0.8);
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3);
}

.floating-input label {
    position: absolute;
    left: 14px;
    top: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.floating-input .input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 193, 7, 0.7);
    font-size: 16px;
    transition: all 0.3s ease;
    pointer-events: none;
    /* Ícone decorativo, não clicável */
    opacity: 0.8;
}

.floating-input input:focus~.input-icon {
    color: rgba(255, 193, 7, 1);
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
}

/* Inputs menores apenas para os campos numéricos na grade de pares */
.welcome-form .input-row .floating-input input {
    padding: 12px 36px 8px 12px;
    /* ajuste fino para alinhamento vertical com o label */
    border-radius: 10px;
    font-size: 0.95em;
    line-height: 1.2;
}

.welcome-form .input-row .floating-input label {
    top: 8px;
    font-size: 12px;
}

/* Quando o campo numérico estiver em foco ou preenchido, o label sobe mais e reduz a fonte */
.welcome-form .input-row .floating-input input:focus+label,
.welcome-form .input-row .floating-input input:not(:placeholder-shown)+label {
    top: -2px;
    /* sobe um pouco mais para não encostar no valor */
    font-size: 10.5px;
}

/* Regras gerais da tela inicial para garantir que qualquer input com valor
   posicione o label fora da área do texto */
.welcome-form .floating-input input:focus+label,
.welcome-form .floating-input input:not(:placeholder-shown)+label {
    top: 2px;
    font-size: 11.5px;
}

.analysis-card-welcome {
    position: relative;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 14px;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    will-change: transform;
}

.analysis-card-welcome:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.1);
}

.card-content-welcome {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
}

.card-icon-welcome i {
    font-size: 20px;
    color: var(--solar-accent);
}

.card-info-welcome h4 {
    margin: 0 0 4px;
    color: #fff3c0;
}

.card-info-welcome p {
    margin: 0;
    color: #d7def0;
    font-size: 13px;
    opacity: .9;
}

.card-badge-welcome {
    background: var(--gradient-solar);
    color: #1a1a1a;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .2px;
}

.card-badge-welcome.premium {
    background: linear-gradient(90deg, #ffd700, #ffb300);
    color: #1a1a1a;
}

.tooltip {
    position: absolute;
    left: 16px;
    bottom: -8px;
    transform: translateY(100%);
    width: min(580px, 85vw);
    background: rgba(15, 33, 64, 0.95);
    color: #e9f1ff;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 3;
}

.analysis-card-welcome:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.analyze-btn-welcome {
    position: relative;
    overflow: hidden;
    padding: 16px 24px;
    border-radius: 12px;
    border: 1px solid var(--ui-primary);
    background: var(--ui-primary);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
    width: 100%;
}

.analyze-btn-welcome:hover {
    transform: translateY(-2px);
    background: var(--ui-primary-dark);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
}

.analyze-btn-welcome:disabled,
.analyze-btn-welcome.analyzing {
    opacity: 0.8;
    cursor: not-allowed;
    transform: none;
}

.analyze-btn-welcome.analyzing {
    background: var(--ui-primary-dark);
}

@keyframes sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* === NOVO: Loading Screen Profissional === */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 20px;
    animation: fadeInLoading 0.5s ease;
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.7), rgba(255, 255, 255, 0.95));
    border: 1px solid var(--ui-border);
    border-radius: 16px;
}

/* Engrenagem Prata */
.loading-gear-wrapper {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
}

.loading-gear {
    font-size: 64px;
    color: #C0C0C0;
    /* Prata */
    filter: drop-shadow(0 4px 12px rgba(192, 192, 192, 0.4));
    animation: spinGear 2s linear infinite;
}

@keyframes spinGear {
    to {
        transform: rotate(360deg);
    }
}

/* Título do Loading */
.loading-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
    text-shadow: none;
}

/* Container de Etapas */
.loading-steps {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cada Etapa */
.loading-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff7ed;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.loading-step.pending {
    border-left-color: var(--ui-border);
}

.loading-step.active {
    border-left-color: var(--ui-primary);
    background: rgba(249, 115, 22, 0.15);
}

.loading-step.completed {
    border-left-color: #22C55E;
    /* Verde */
    background: rgba(34, 197, 94, 0.1);
}

/* Ícones das Etapas */
.step-icon {
    font-size: 16px;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.loading-step.active .step-icon {
    color: var(--ui-primary);
    animation: spinGear 1.5s linear infinite;
}

.loading-step.completed .step-icon {
    color: #22C55E;
}

/* Texto das Etapas */
.loading-step span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-text);
}

/* Barra de Progresso */
.progress-bar-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 8px;
    background: rgba(249, 115, 22, 0.18);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ui-primary), var(--ui-primary-dark));
    border-radius: 999px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
}

.progress-percent {
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text);
}

/* Mensagem Marketing */
.loading-marketing-message {
    font-size: 15px;
    font-weight: 500;
    color: var(--ui-text-muted);
    text-align: center;
    margin: 8px 0 0;
    animation: pulseMessage 2s ease-in-out infinite;
}

@keyframes pulseMessage {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

@keyframes fadeInLoading {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Transição do Formulário */
.welcome-form.fade-out {
    animation: fadeOutForm 0.3s ease forwards;
}

@keyframes fadeOutForm {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Transições de Tela */
.fade-in {
    animation: fadeInWelcome .5s ease forwards;
}

.fade-out-up {
    animation: fadeOutUp .6s ease forwards;
}

.slide-in-left {
    animation: slideInLeft .6s ease forwards;
}

.slide-in-right {
    animation: slideInRight .6s ease forwards;
}

@keyframes fadeInWelcome {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Layout Principal --- */
#sidebar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--sidebar-bg);
    padding: 20px;
    overflow-y: auto;
    border-right: none;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

/* --- App Shell: Sidebar fixa + Main --- */
.app-shell {
    display: flex;
    gap: 24px;
    align-items: stretch;
    padding: 24px;
}

#sidebar.sidebar-fixed {
    width: 360px;
    max-width: 360px;
    margin: 0;
    height: calc(100vh - 48px);
    position: sticky;
    top: 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-fixed .floating-input input {
    height: 36px;
    padding: 14px 12px 6px;
    font-size: 0.9rem;
    max-width: 100%;
    min-width: 0;
    line-height: 1.2;
}

.sidebar-fixed .input-row {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar-fixed .floating-input label {
    font-size: 0.76rem;
    top: 8px;
    line-height: 1;
    background: var(--ui-surface);
    padding: 0 6px;
    margin-left: -6px;
}

.sidebar-fixed .floating-input input:focus+label,
.sidebar-fixed .floating-input input:not(:placeholder-shown)+label {
    top: -7px;
    font-size: 0.68rem;
    color: var(--ui-primary-dark);
}

.sidebar-fixed .input-icon {
    font-size: 0.85rem;
}

.sidebar-actions {
    margin-top: 6px;
}

.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pre-analysis-panel {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow);
    min-height: calc(100vh - 48px);

    .awaiting-card {
        max-width: 720px;
        margin: 0 auto;
        padding: 32px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--ui-border);
        box-shadow: var(--ui-shadow);
        text-align: center;
    }

    .awaiting-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 12px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fef3c7;
        color: #f59e0b;
        font-size: 1.6rem;
    }

    .awaiting-card h2 {
        margin: 4px 0 6px;
        color: #1f2937;
    }

    .awaiting-card p {
        margin: 0 0 16px;
        color: #6b7280;
    }

    .tips-card {
        text-align: left;
        padding: 16px;
        border-radius: 12px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1e3a8a;
    }

    .tips-card h4 {
        margin: 0 0 8px;
    }

    .tips-card ul {
        margin: 0;
        padding-left: 18px;
    }

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.pre-hero h2 {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    color: #1f1f1f;
}

.pre-hero p {
    margin: 0;
    color: #4a4a4a;
}

.pre-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.15);
    color: #b46b00;
    font-weight: 600;
    margin-bottom: 12px;
}

.pre-carousel {
    position: relative;
    min-height: 160px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.pre-slide {
    position: absolute;
    inset: 0;
    padding: 24px;
    opacity: 0;
    transform: translateY(8px);
    animation: preSlideFade 12s infinite;
}

.pre-slide:nth-child(1) {
    animation-delay: 0s;
}

.pre-slide:nth-child(2) {
    animation-delay: 4s;
}

.pre-slide:nth-child(3) {
    animation-delay: 8s;
}

.pre-slide h3 {
    margin: 0 0 6px 0;
    color: #1f1f1f;
}

.pre-slide p {
    margin: 0;
    color: #4a4a4a;
}

@keyframes preSlideFade {

    0%,
    10% {
        opacity: 0;
        transform: translateY(8px);
    }

    20%,
    40% {
        opacity: 1;
        transform: translateY(0);
    }

    50%,
    100% {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.results-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.secondary-btn {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 152, 0, 0.35);
    background: rgba(255, 255, 255, 0.7);
    color: #b45f00;
    cursor: pointer;
    font-weight: 600;
}

.secondary-btn:hover {
    background: rgba(255, 193, 7, 0.15);
}

#map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

/* #map::before removido - não mais necessário no novo layout */

/* --- Cabeçalho e Formulário na Sidebar --- */
#sidebar h1 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: 1.5em;
    font-weight: bold;
}

#analysis-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

#analysis-form label {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 5px;
    display: block;
    color: var(--text-color);
}

.input-group {
    display: flex;
    gap: 15px;
}

.input-group>div {
    flex: 1;
}

#analysis-form input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--card-bg);
    /* Garantir contraste adequado do texto digitado nos campos da tela inicial */
    color: var(--text-color);
    /* Deixar o cursor visível em todos os temas */
    caret-color: var(--primary-color);
    /* backdrop-filter removido */
    transition: all 0.3s ease;
}

#analysis-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

/* Sobrescreve a regra de placeholder transparente dos inputs flutuantes
   apenas dentro do #analysis-form para que dicas apareçam se usadas */
#analysis-form input::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

#analysis-form button {
    padding: 15px;
    background: var(--solar-gradient);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    animation: pulse 2s infinite;
}

#analysis-form button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

#analysis-form button:disabled {
    background: #ccc;
    cursor: not-allowed;
    animation: none;
}

@keyframes pulse {
    0% {
        box-shadow: var(--shadow);
    }

    50% {
        box-shadow: 0 4px 20px rgba(255, 152, 0, 0.5);
    }

    100% {
        box-shadow: var(--shadow);
    }
}

/* --- Loader/Spinner --- */
#loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    width: 100%;
    background: var(--card-bg);
    border-radius: 15px;
    /* backdrop-filter removido */
    box-shadow: var(--shadow);
}

/* Garante que a classe .hidden sempre esconda o loader, mesmo com seletor por ID */
#loader.hidden {
    display: none;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid var(--solar-gradient);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

#loader-message {
    margin: 0;
    font-size: 1em;
    color: var(--text-color);
    text-align: center;
    font-weight: 500;
}

/* --- Barra de Progresso --- */
.progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-color);
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--solar-gradient);
    border-radius: 999px;
    transition: width 0.35s ease;
    position: relative;
}

#progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Seções e Painéis --- */
.panel {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    /* backdrop-filter removido */
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    max-width: 100%;
    /* Evitar overflow horizontal */
    overflow-wrap: break-word;
    /* Quebra palavras longas */
    word-wrap: break-word;
}

.panel:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.hidden {
    display: none;
}

/* --- Seletores e Abas --- */
.select-wrapper {
    position: relative;
    width: 100%;
}

#scenario-selector {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    appearance: none;
    font-size: 1em;
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    /* backdrop-filter removido */
}

#scenario-selector:hover {
    border-color: var(--primary-color);
}

#scenario-selector:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

/* select-wrapper arrow removed; selector was replaced by slider */

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    background: var(--card-bg);
    /* backdrop-filter removido */
    box-shadow: var(--shadow);
}

.tab-button {
    flex: 1;
    padding: 12px 15px;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    font-size: 1em;
    transition: all 0.3s ease;
}

.tab-button.active {
    background: var(--solar-gradient);
    color: white;
    font-weight: 600;
}

.tab-button:hover {
    background: rgba(255, 152, 0, 0.1);
}

.tab-content {
    display: none;
    overflow: visible;
    /* Garante que o conteúdo do tab não seja cortado */
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
    overflow: visible;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Resultados e Cards --- */
.result-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.result-item:hover {
    background: rgba(255, 152, 0, 0.05);
    border-radius: 5px;
}

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

.result-item span:first-child {
    font-weight: 500;
    color: var(--text-color);
}

.result-item span:last-child,
.result-item strong {
    font-weight: 600;
}

.result-item.small span {
    font-size: 0.9em;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    /* backdrop-filter removido */
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card .value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}

.card .label {
    font-size: 0.9em;
    color: var(--text-color);
}

.card.savings .value {
    color: #4caf50;
}

.card.payback .value {
    color: #f44336;
}

.card.cost .value {
    color: #ff9800;
}

.card.roi .value,
.card.irr .value {
    color: var(--primary-color);
}

.card.co2 .value {
    color: #4caf50;
}

.card.tree .value {
    color: #8bc34a;
}

.card.energy .value {
    color: var(--secondary-color);
}

.card.car .value {
    color: #9c27b0;
}


/* --- Tabelas --- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

thead th {
    background: var(--solar-gradient);
    color: white;
    font-weight: 600;
}

tbody tr {
    transition: all 0.3s ease;
}

tbody tr:nth-child(even) {
    background: rgba(255, 152, 0, 0.05);
}

tbody tr:hover {
    background: rgba(255, 152, 0, 0.1);
}


/* =================================================================
   ▼▼▼ NOVOS ESTILOS PARA INTERATIVIDADE (HEATMAP E FINANCIAMENTO) ▼▼▼
   ================================================================= */

/* Estilo para os botões de Heatmap e Financiamento */
#heatmap-buttons {
    display: flex;
    gap: 10px;
}

#heatmap-buttons button {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* backdrop-filter removido */
}

#heatmap-buttons button:hover {
    border-color: var(--primary-color);
    background: rgba(255, 152, 0, 0.1);
}

/* Estilo para grupo de botões do simulador */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.option-btn {
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    /* backdrop-filter removido */
}

.option-btn:hover,
#heatmap-buttons button:hover {
    background: rgba(255, 152, 0, 0.1);
    border-color: var(--primary-color);
}

/* Estilo para o botão ATIVO (selecionado) em qualquer grupo */
.option-btn.active,
#heatmap-buttons button.active {
    background: var(--solar-gradient);
    color: white;
    border-color: var(--primary-color);
    font-weight: bold;
    box-shadow: var(--shadow);
}

/* Destaque para o resultado da parcela no financiamento */
#financing-results .result-item.highlight {
    background: rgba(255, 152, 0, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
    border-left: 4px solid var(--primary-color);
    box-shadow: var(--shadow);
}

#financing-results .result-item.highlight strong {
    font-size: 1.5em;
    color: var(--primary-color);
}

/* --- Estilos para a Nova Legenda de Insolação --- */

.legend-list {
    list-style: none;
    padding-left: 5px;
    font-size: 0.9em;
}

.legend-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.legend-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Aplica a cor correta para cada item da lista */
.legend-list li:nth-child(1) .legend-color {
    background-color: #fc8d59;
}

.legend-list li:nth-child(2) .legend-color {
    background-color: #fee090;
}

.legend-list li:nth-child(3) .legend-color {
    background-color: #ffffbf;
}

.legend-list li:nth-child(4) .legend-color {
    background-color: #e0f3f8;
}

.legend-list li:nth-child(5) .legend-color {
    background-color: #91bfdb;
}

.legend-list li:nth-child(6) .legend-color {
    background-color: #4575b4;
}

/* --- Estilos para a Nova Visualização Mensal --- */
#monthly-visualization-panel {
    background: var(--solar-gradient-2);
    border: 2px solid var(--secondary-color);
    border-radius: 15px;
}

.month-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.animation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-color);
    color: white;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

.animation-btn:hover {
    background: #e65100;
    border-color: #e65100;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.animation-btn.playing {
    background: #f44336;
    border-color: #f44336;
}

.animation-btn.playing:hover {
    background: #d32f2f;
    border-color: #d32f2f;
}

.month-slider-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.month-slider-container label {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--primary-color);
}

#month-slider {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#month-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#month-slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#month-value {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.2em;
}

.help-text {
    font-size: 0.9em;
    color: var(--text-color);
    margin: 5px 0;
    padding: 10px;
    background: var(--card-bg);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

/* --- Estilos para a Simulação Interativa (MANTIDOS para compatibilidade) --- */
#interactive-sim-controls {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#interactive-sim-controls.active {
    background-color: #d32f2f;
    color: white;
    border-color: #b71c1c;
}

#hour-slider-container {
    margin-top: 10px;
}

#hour-slider {
    width: 100%;
}

/* --- Estilos para o Simulador de Financiamento --- */
#financing-simulator h3 {
    margin-top: 0;
    color: var(--primary-color);
}

.option-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

.financing-notice {
    font-size: 0.8em;
    color: var(--text-color);
    background: var(--card-bg);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid var(--primary-color);
}

#financing-results h4 {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    color: var(--primary-color);
}

#financing-results hr {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 10px 0;
}

#export-container button {
    width: 100%;
    padding: 15px;
    background: var(--solar-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

/* Quando export-container está inline (ao lado do seletor), reduzir largura dos botões */
.export-inline button {
    width: auto !important;
    padding: 10px 12px;
    font-size: 0.95em;
}

#export-container button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

#export-container button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* --- Estilos para Checkbox de Precisão --- */
.precision-option {
    margin: 10px 0;
    padding: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* backdrop-filter removido */
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 5px;
    user-select: text;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked+.checkmark {
    background-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked+.checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.help-text {
    color: var(--text-color);
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1.3;
    margin-left: 30px;
}

/* --- Badge de Precisão --- */
.precision-badge {
    display: inline-block;
    background: var(--solar-gradient);
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* --- Nova Interface de Seleção de Precisão --- */
.precision-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 12px;
    position: relative;
    z-index: 9998;
    overflow: visible;
}

.choice-button {
    position: relative;
    display: block;
    padding: 14px;
    border: 2px solid var(--border-color);
    border-radius: 15px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: text;
    /* backdrop-filter removido */
    box-shadow: var(--shadow);
}

.choice-button:hover {
    border-color: var(--primary-color);
    background: rgba(255, 152, 0, 0.05);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.choice-button.selected {
    border-color: var(--primary-color);
    background: rgba(255, 152, 0, 0.1);
    box-shadow: 0 0 0 1px var(--primary-color), 0 4px 12px rgba(255, 152, 0, 0.25);
}

.choice-button h4 {
    margin: 0 0 4px 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--primary-color);
}

.choice-button p {
    margin: 0;
    font-size: 0.85em;
    color: var(--text-color);
    line-height: 1.25;
}

/* Compacta os cartões da seleção de precisão usados na tela inicial */
.precision-selector .analysis-card-welcome {
    padding: 12px;
}

.precision-selector .card-content-welcome {
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
}

.precision-selector .card-icon-welcome i {
    font-size: 18px;
}

.precision-selector .card-badge-welcome {
    padding: 4px 8px;
    font-size: 11px;
}

.hidden-radio {
    display: none;
}

.tooltip {
    display: none;
}

.choice-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--card-bg);
}

/* Botão Analisar - Estado Desabilitado */
#analyze-button:disabled {
    background: #ccc !important;
    color: #888 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

#analyze-button:disabled:hover {
    background: #ccc !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsividade */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .app-shell {
        flex-direction: column;
        padding: 16px;
    }

    #sidebar.sidebar-fixed {
        width: 100%;
        max-width: 100%;
        height: auto;
        position: relative;
        top: 0;
    }

    .pre-analysis-panel {
        min-height: auto;
    }

    #sidebar {
        width: 100%;
        max-height: none;
    }

    #map {
        width: 100%;
        height: 50vh;
    }

    .precision-selector {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .input-group {
        flex-direction: column;
        gap: 10px;
    }

    .welcome-form-container {
        max-width: 100%;
        padding: 0;
    }

    .welcome-form .input-row {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-content: initial;
    }

    .tabs {
        flex-wrap: wrap;
    }

    .tab-button {
        flex: 1 1 50%;
        min-width: 120px;
    }

    .card-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* --- Estilos para o Slider de Painéis sobre o Mapa --- */
.panel-slider-overlay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none;
}

.panel-slider-overlay.hidden {
    display: none;
}

.panel-slider-container {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(30, 30, 45, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    min-width: 350px;
}

.panel-slider-label {
    display: block;
    color: #fff3c0;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

.panel-slider-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.panel-count {
    font-size: 32px;
    font-weight: 700;
    color: #ff9800;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    min-width: 60px;
    text-align: center;
}

#panel-slider {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, rgba(255, 152, 0, 0.2), rgba(255, 152, 0, 0.4));
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

#panel-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.6), 0 0 20px rgba(255, 152, 0, 0.3);
    border: 2px solid #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#panel-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.8), 0 0 30px rgba(255, 152, 0, 0.5);
}

#panel-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.6), 0 0 20px rgba(255, 152, 0, 0.3);
    border: 2px solid #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#panel-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.8), 0 0 30px rgba(255, 152, 0, 0.5);
}

.panel-slider-info {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

#panel-power-display {
    font-size: 14px;
    color: #91bfdb;
    font-weight: 500;
}

/* Responsividade do Slider de Painéis */
@media (max-width: 768px) {
    .panel-slider-container {

        /* === Novo Frontend Laranja (Overrides) === */
        .app-shell {
            gap: 24px;
            padding: 24px;
        }

        #sidebar.sidebar-fixed {
            position: sticky;
            top: 24px;
            border-radius: 18px;
            border: 1px solid #f3d8c2;
            box-shadow: 0 18px 40px rgba(249, 115, 22, 0.12);
            overflow: hidden;
        }

        #sidebar.sidebar-fixed::before {
            content: '';
            display: block;
            height: 6px;
            background: linear-gradient(90deg, #f97316, #f59e0b, #fb923c);
        }

        .sidebar-title {
            color: var(--ui-primary-dark);
            letter-spacing: -0.3px;
        }

        .sidebar-subtitle {
            color: var(--ui-text-muted);
        }

        .floating-input label {
            color: var(--ui-text-muted);
        }

        .floating-input input:focus+label,
        .floating-input input:not(:placeholder-shown)+label {
            color: var(--ui-primary-dark);
        }

        .analyze-btn-welcome {
            background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark));
            border: 1px solid rgba(249, 115, 22, 0.6);
            box-shadow: 0 10px 22px rgba(249, 115, 22, 0.25);
        }

        .analyze-btn-welcome:hover {
            background: linear-gradient(135deg, #fb923c, var(--ui-primary-dark));
        }

        .tab-button {
            background: transparent;
            color: var(--ui-text);
        }

        .tab-button.active {
            background: var(--solar-gradient);
            color: #fff;
            border-color: rgba(249, 115, 22, 0.35);
        }

        .tab-button:hover {
            background: var(--ui-surface-variant);
        }

        .awaiting-card {
            border: 1px solid #f3d8c2;
            box-shadow: 0 14px 30px rgba(249, 115, 22, 0.12);
        }

        .awaiting-icon {
            background: var(--ui-primary-weak);
            color: var(--ui-primary-dark);
        }

        .progress-bar-container {
            background: #fff2e7;
        }

        .progress-percent {
            color: var(--ui-primary-dark);
        }

        min-width: 280px;
        padding: 12px 16px;
    }

    .panel-count {
        font-size: 28px;
    }

    .panel-slider-overlay {
        bottom: 15px;
    }
}

/* --- Botão de Proposta Comercial --- */
.proposal-button {
    background: var(--solar-gradient) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    margin-left: 10px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow) !important;
}

.proposal-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

.proposal-button:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow) !important;
}



/* --- Estilos para o Modal de Erro --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
}

.modal-content {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow);
    /* backdrop-filter removido */
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

.modal-content h3 {
    margin-top: 0;
    color: #f44336;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.modal-content p {
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 20px;
}

.modal-content button {
    background: var(--solar-gradient);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 1em;
    transition: all 0.3s ease;
}

.modal-content button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Reforçar que .hidden sempre esconda elementos */
/* Container para os resultados */
#results-container {
    width: 100%;
    max-height: 100%;
    /* Preencher todo o espaço disponível no sidebar */
    overflow: visible;
    /* Permitir que os conteúdos sejam visíveis */
}

.hidden {
    display: none !important;
}

/* --- Estilos para a Seção de Validação Cruzada --- */
#cross-validation-container .result-item.highlight {
    background: rgba(255, 152, 0, 0.1);
    border-left: 4px solid var(--primary-color);
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}

#cross-validation-container .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

#cross-validation-container .result-item:last-of-type {
    border-bottom: none;
}

.explanation-note {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.4;
    /* backdrop-filter removido */
}

.explanation-note i {
    color: var(--primary-color);
    margin-right: 5px;
}

/* --- Estilos para o Novo Layout da Aba Visão Geral --- */

/* Layout da aba overview */
.overview-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Dropdown acima do mapa */
.config-section {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Itens dentro da seção de configuração alinhados horizontalmente */
.config-section .config-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.config-section .config-item.config-item+.config-item {
    margin-left: 20px;
}

.export-inline button {
    margin: 4px 6px;
    padding: 6px 10px;
    border-radius: 8px;
}

/* Em telas pequenas, empilhar */
@media (max-width: 768px) {
    .config-section {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .config-section .config-item {
        justify-content: space-between;
    }
}

.config-section .panel {
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: var(--shadow);
    flex: 1;
    min-width: 200px;
    height: 75px;
    min-height: 75px;
    max-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.config-section label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0;
    display: block;
}

/* Mapa centralizado */
.map-section-centered {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.map-container-centered {
    width: calc(100% - 40px);
    max-width: 960px;
    /* aumentado para ficar mais largo dentro do branco */
    height: 520px;
    /* leve aumento vertical para equilíbrio
                     manter responsividade abaixo */
    position: relative;
    /* necessário para posicionar o overlay do slider sobre o mapa */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0 20px;
    /* garante espaçamento interno ao branco */
}

/* Grid 3x2 de cards */
.info-grid-3x2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

/* Novo layout: 3 cards superiores */
.info-grid-top-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

/* Card de Visualização Mensal com fundo laranja */
#monthly-insolation-container {
    background: var(--solar-gradient) !important;
    color: white !important;
    border: none !important;
}

#monthly-insolation-container h3 {
    color: white !important;
    font-weight: 600;
}

#monthly-insolation-container .description {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem;
}

/* Controles de animação */
#animation-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 15px 0;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.control-btn i {
    margin-right: 8px;
}

.control-btn.playing {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Display do mês atual */
.month-display {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 10px 0 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Slider dentro do card laranja */
.slider-container {
    margin: 10px 0;
}

#month-slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

#month-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#month-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Novo layout: 1 card inferior */
.info-grid-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0 30px 0;
}

.info-card {
    min-height: 220px;
    /* ajustado para caber slider + barra + legenda */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Card de Especificações Técnicas (largo abaixo da tabela) */
.technical-specs {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.technical-specs h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.spec-block h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.spec-key {
    color: #333;
    font-weight: 600;
}

.spec-value {
    color: #222;
}

@media (max-width: 768px) {
    .specs-grid {
        grid-template-columns: 1fr;
    }
}

/* Seções adicionais */
.additional-sections {
    margin: 40px 0;
}

.additional-sections h3 {
    color: var(--text-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}

/* Botões de exportação centralizados */
.export-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.export-section button {
    min-width: 200px;
}

/* Responsivo para os grids */
@media (max-width: 768px) {

    .info-grid-3x2,
    .info-grid-top-3 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-grid-bottom {
        gap: 15px;
    }

    .map-container-centered {
        height: 400px;
        max-width: 100%;
    }

    .overview-layout {
        padding: 15px;
    }

    .export-section {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 1024px) {
    .info-grid-3x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .map-container-centered {
        max-width: 1080px;
        height: 540px;
    }
}

/* Manter os cards visualmente consistentes */
.info-card.panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.info-card.panel:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Garantir que cards hidden fiquem ocultos */
.info-card.hidden {
    display: none !important;
}

/* ======= Visualização Mensal + Legenda Compacta ======= */
.merged-legend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Tornar o cartão combinado mais compacto em vez de obedecer ao min-height global */
.merged-legend {
    min-height: 0;
    padding: 14px;
}

.merged-legend .month-controls {
    display: flex;
    flex-direction: column;
    /* empilha: botão, slider, barra */
    gap: 10px;
    align-items: stretch;
    margin-bottom: 6px;
}

/* Garante que slider e barra ocupem toda a largura disponível */
.merged-legend .month-controls .month-slider-container,
.merged-legend .month-controls .animation-btn,
.merged-legend .month-controls .insolation-bar {
    width: 100%;
}

/* Barra única com gradiente contínuo (compacta logo abaixo do slider) */
.insolation-bar {
    display: flex;
    width: 100%;
    height: 18px;
    /* um pouco mais grossa conforme pedido */
    border-radius: 8px;
    overflow: hidden;
    margin: 6px 0 6px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.insolation-segment {
    flex: 1 1 0%;
}

/* Cores alinhadas com getColorForSunlight() - progressão azul → amarelo */
.insolation-segment.seg-high {
    background: #ffd54d;
}

/* >95% = amarelo forte */
.insolation-segment.seg-80 {
    background: #ffb74d;
}

/* 80-95% = laranja claro */
.insolation-segment.seg-60 {
    background: #ff8a65;
}

/* 60-80% = laranja */
.insolation-segment.seg-40 {
    background: #ff6b6b;
}

/* 40-60% = vermelho */
.insolation-segment.seg-20 {
    background: #2196f3;
}

/* 20-40% = azul */
.insolation-segment.seg-low {
    background: #bbdefb;
}

/* <20% = azul fraco */

.insolation-labels {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
    color: white;
    text-align: center;
}

.insolation-label {
    padding: 2px 4px;
}

/* esconder quadradinhos antigos caso ainda existam */
.insolation-legend,
.legend-item,
.legend-color {
    display: none !important;
}

@media (max-width: 720px) {
    .merged-legend .month-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .insolation-legend {
        font-size: 12px;
        gap: 6px;
    }
}

/* =========================================
   NOVAS FUNCIONALIDADES DE VENDAS (UI)
   ========================================= */

/* 1. Badge de Nota do Telhado */
.grade-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
    border: none;
}

.grade-a {
    color: #2e7d32;
    /* Verde Real */
    font-weight: 800;
    font-size: 0.66rem;
    text-shadow: none;
}

.grade-b {
    color: #f57f17;
    /* Laranja Profundo */
    font-weight: 800;
}

.grade-c {
    color: #d84315;
    /* Vermelho Tijolo */
    font-weight: 800;
}

/* 2. Barra de Cobertura de Consumo */
.coverage-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
}

.coverage-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.coverage-bar-bg {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.coverage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 3px;
    transition: width 1.5s ease-out;
}

.coverage-text {
    font-weight: 700;
    color: #388e3c;
    min-width: 40px;
    text-align: right;
    font-size: 0.85rem;
}

#coverage-explain {
    font-size: 0.65rem;
    color: #666;
    margin-top: 1px;
    line-height: 1.1;
}

/* 3. Selo Tarifa ANEEL */
.aneel-badge {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 8px 12px !important;
    border-radius: 4px;
}

.aneel-text {
    color: #0d47a1;
    font-family: 'Roboto Mono', monospace;
}

/* 4. Metáfora Visual de Árvores */
.environmental-impact-visual {
    background: linear-gradient(135deg, #f1f8e9, #dcedc8);
    border: 1px solid #c5e1a5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.trees-icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tree-icon {
    font-size: 24px;
    color: #43a047;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.impact-text {
    font-size: 1.1em;
    color: #33691e;
    margin: 0;
}

/* 5. Heatmap (Calendário Térmico) */
.heatmap-calendar-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.heatmap-calendar-section h4 {
    margin: 0 0 16px;
    color: #424242;
    text-align: center;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 colunas x 2 linhas em mobile, 12x1 em desktop */
    gap: 8px;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .heatmap-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    transition: transform 0.2s ease;
    cursor: default;
    position: relative;
}

.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.heatmap-cell span {
    font-size: 0.75em;
    opacity: 0.8;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.85em;
    color: #757575;
}

.heatmap-gradient-bar {
    width: 200px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #fff9c4, #fff176, #ffb74d, #ff7043);
}

/* =========================================
   CABEÇALHO DE ENDEREÇO (RELATÓRIO)
   ========================================= */
.report-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.report-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ff9800;
    /* Laranja Primário */
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

#report-address-street {
    font-size: 1.6rem;
    line-height: 1.2;
    color: #212121;
    margin: 0 0 4px 0;
    font-weight: 800;
}

#report-address-city {
    font-size: 1rem;
    color: #757575;
    margin: 0;
    font-weight: 500;
}

/* --- CORREÇÕES UI (Step 7315) --- */

/* Aumentar fonte do Heatmap */
.heatmap-cell {
    font-size: 1.1rem !important;
    /* Maior */
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.heatmap-cell span {
    font-size: 1rem !important;
}

/* Melhorar destaque do Badge de Nota */
#roof-grade-badge {
    background: #fff3e0;
    border: 2px solid #ffb74d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.grade-c {
    color: #f57f17 !important;
    /* Laranja em vez de vermelho */
    font-weight: 800;
}

/* =========================================
   HEADER DE ENDEREÇO INTEGRADO (Abas -> Mapa)
   ========================================= */
.report-header-integrated {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

.header-icon {
    width: 48px;
    height: 48px;
    background: #fff3e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9800;
    font-size: 20px;
}

.header-text {
    flex: 1;
}

.header-text h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #212121;
    font-weight: 700;
}

.header-text p {
    margin: 2px 0 0;
    color: #757575;
    font-size: 0.95rem;
}

.badge-analyzed {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================
   COCKPIT DE CONFIGURAÇÃO (LATERAL)
   ========================================= */
.cockpit-panel {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
}

.cockpit-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: #616161;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cockpit-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.cockpit-row {
    display: flex;
    gap: 12px;
}

.input-group-compact {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-group-compact label {
    font-size: 0.8rem;
    color: #757575;
    font-weight: 600;
}

.input-group-compact input {
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9rem;
    color: #37474f;
    transition: border-color 0.2s;
}

.input-group-compact input:focus {
    border-color: #ff9800;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.1);
}

/* Campo de Busca Rápida */
.search-box-compact {
    display: flex;
    position: relative;
}

.search-box-compact input {
    width: 100%;
    padding-right: 36px;
}

.search-box-compact button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ff9800;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s;
}

.search-box-compact button:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Botão Recalcular */
.recalc-btn {
    background: #424242;
    /* Cinza Escuro */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    margin-top: 4px;
}

.recalc-btn:hover {
    background: #212121;
}

.recalc-btn i {
    font-size: 0.9rem;
}

/* Ajuste no Slider existente para integrar com o cockpit */


/* =========================================
   FIX: COCKPIT DE CONFIGURAÇÃO (LATERAL)
   ========================================= */

/* Resetar estilos conflitantes da .config-section antiga */
.config-section.cockpit-panel {
    display: block;
    /* Remove display: flex original */
    margin: 0 0 20px 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.config-section.cockpit-panel .config-item {
    display: block;
    /* Remove display: flex dos itens filhos */
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    min-width: auto;
}

/* Header do Cockpit */
.cockpit-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff9800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Layout dos Inputs */
.cockpit-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cockpit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.input-group-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group-compact label {
    font-size: 0.75rem;
    color: #616161;
    font-weight: 700;
    text-transform: uppercase;
}

.input-group-compact input {
    height: 38px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 0.9rem;
    color: #212121;
    transition: all 0.2s;
    background: #fafafa;
}

.input-group-compact input:focus {
    border-color: #ff9800;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
    outline: none;
}

/* Busca Rápida */
.search-box-compact {
    position: relative;
    display: flex;
}

.search-box-compact input {
    width: 100%;
    padding-right: 40px;
}

.search-box-compact button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 32px;
    border: none;
    background: #ffecb3;
    color: #ff8f00;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.search-box-compact button:hover {
    background: #ffca28;
    color: #fff;
}

/* Slider de Painéis (Adaptação) */


.panel-slider-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Botões de Exportação */
#export-container.config-item {
    margin: 0;
    /* Alinhamento PERFEITO */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

#export-pdf-btn,
#generate-proposal-btn {
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 4px 8px;
    font-size: 0.75rem;
    justify-content: center;
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}

/* Botão Recalcular */
.recalc-btn {
    width: 100%;
    background: #263238;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.recalc-btn:hover {
    background: #37474f;
}

/* =========================================
   FIX: LAYOUT CONFIG-SECTION (SLIDER + BOTÕES)
   ========================================= */

/* Container Principal */
.config-section {
    display: flex;
    justify-content: space-between;
    /* Espalha os itens */
    align-items: stretch;
    /* Garante mesma altura */
    gap: 10px;
    margin-bottom: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilo Geral dos Painéis */
/* Regra duplicada removida - usar .config-section .panel do início do arquivo */

#panel-config-panel {
    flex: 2.2;
}

#potential-panel {
    flex: 0.7;
}

#coverage-panel {
    flex: 0.8;
}

#export-container {
    flex: 1;
}

.panel-mini-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ff8f00;
    margin-bottom: 3px;
    text-align: center;
}

#potential-panel .result-item,
#coverage-panel .result-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.72rem;
    margin: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    border: none;
    background: transparent;
}

#potential-panel .result-item span {
    font-size: 0.72rem;
    color: #666;
}

#potential-panel .result-item strong {
    font-size: 0.8rem;
    line-height: 1.2;
}

#potential-panel .result-item span {
    font-size: 0.68rem;
    color: #666;
}

#potential-panel .result-item strong {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
    width: 100%;
}

#coverage-panel .coverage-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    justify-content: center;
}

/* Remove margens antigas incorretas */
.config-section .config-item.config-item+.config-item {
    margin-left: 0;
}

/* Painel do Slider */
#panel-config-panel {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 2px;
    justify-content: center;
    width: 100%;
}

.panel-slider-inline {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0;
    gap: 0;
}

#panel-slider {
    height: 4px;
    margin: 1px 0;
}

.header-right-group {
    gap: 6px !important;
}

.panel-power-display {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #999;
    margin-top: 0;
    font-weight: 400;
}

/* Header do Slider (Label + Badge) */
/* Ajuste para ficar como na imagem: Label na esq, Valor na dir */
.panel-config-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    gap: 4px;
    width: 100%;
}

.panel-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    width: 100%;
}

#panel-count-display {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ff9800;
    text-align: center;
    line-height: 1;
    min-width: 40px;
}



/* Responsividade */
@media (max-width: 768px) {
    .config-section {
        flex-direction: column;
    }

    #export-container {
        flex-direction: column;
    }

    #export-container button {
        width: 100%;
    }
}