/*
 * Arquivo CSS para o plugin Calculadora (CC)
 */

#resultado {
    scroll-margin-top: 30px; /* ou a altura exata do seu cabeçalho */
}

.cc-hidden {
    display: none;
}

/* Estilo para melhorar a aparência do slider */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #b91c1c; /* Cor vermelha (red-700) */
    cursor: pointer;
    border-radius: 50%;
    margin-top: 0px; /* Ajuste vertical para centralizar */
}

input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #b91c1c; /* Cor vermelha (red-700) */
    cursor: pointer;
    border-radius: 50%;
    border: none; /* Garante alinhamento no Firefox */
}

/* --- ESTILOS PARA OS BOTÕES DE OBJETIVO --- */

/* Esconde o radio button real */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.objective-button-label {
    display: block;
    cursor: pointer;
}

.objective-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* cinza 300 */
    border-radius: 0.5rem;
    background-color: #ffffff;
    font-weight: 500;
    color: #374151; /* cinza 700 */
    transition: all 0.2s ease-in-out;
}

.objective-button-label:hover .objective-button {
    border-color: #9ca3af; /* cinza 400 */
}

/* Estilo do botão quando o radio está CHECADO */
.objective-button-label input:checked + .objective-button {
    border-color: #b91c1c; /* vermelho 700 */
    background-color: #fef2f2; /* vermelho 50 */
    color: #7f1d1d; /* vermelho 900 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    position: relative;
}

/* Estilo para a caixa de sub-opções */
.objective-options {
    display: none;
    padding: 1.25rem;
    padding-top: 1.5rem;
    margin-top: -0.5rem;
    border: 1px solid #b91c1c; /* vermelho 700 */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: #ffffff;
    animation: fadeIn 0.3s ease-in-out;
}

.objective-options:not(.cc-hidden) {
    display: block;
}

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

/* --- GERAL & RESET BÁSICO --- */
.cc-container {
    --cc-main-color: #af3838; /* red-600 */
    --cc-main-color-dark: #b91c1c; /* red-700 */
    --cc-text-dark: #1f2937; /* gray-800 */
    --cc-text-medium: #374151; /* gray-700 */
    --cc-text-light: #4b5563; /* gray-600 */
    --cc-border-color: #d1d5db; /* gray-300 */
    --cc-bg-light: #f9fafb; /* gray-50 */

    max-width: 48rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem; /* p-6 */
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border-radius: 0.5rem; /* rounded-lg */
    color: var(--cc-text-dark);
    box-sizing: border-box;
}

.cc-container *, .cc-container *::before, .cc-container *::after {
    box-sizing: inherit;
}

/* --- TÍTULOS --- */
.cc-main-title {
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    font-weight: 700; /* font-bold */
    margin-bottom: 0.75rem; /* mb-3 */
    text-align: center; /* text-center */
    color: var(--cc-text-dark);
}

/* --- FORMULÁRIO --- */
.cc-form > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 2rem; /* space-y-8 */
}

.cc-fieldset {
    border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
    padding-top: 1rem; /* pt-4 */
}
.cc-fieldset > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 1.5rem; /* space-y-6 */
}
.cc-fieldset-main {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.cc-legend {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem;
    font-weight: 500; /* font-medium */
    color: var(--cc-text-medium);
    margin-bottom: 0.5rem; /* mb-2 */
}
.cc-legend-main {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--cc-text-medium);
}
.cc-legend-xl {
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 600; /* font-semibold */
    color: var(--cc-text-dark);
    margin-bottom: 1rem; /* mb-4 */
}

/* --- GRUPOS DE ELEMENTOS --- */
.cc-radio-group {
    display: flex;
    align-items: center;
}
.cc-radio-group > *:not([hidden]) ~ *:not([hidden]) {
    margin-left: 1.5rem; /* space-x-6 */
}

.cc-v-stack-2 > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 0.5rem; /* space-y-2 */
}
.cc-v-stack-3 > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 0.75rem; /* space-y-3 */
}
.cc-section-options {
    padding-left: 1rem;
    padding-right: 1rem;
}
.cc-section-options > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 1.5rem; /* space-y-6 */
}

/* --- INPUTS: RADIO --- */
.cc-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.cc-radio-label span {
    margin-left: 0.5rem;
    color: var(--cc-text-medium);
}
.cc-radio-input {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: var(--cc-border-color);
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--cc-border-color);
    border-radius: 50%;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}
.cc-radio-input::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--cc-main-color);
}
.cc-radio-input:checked::before {
    transform: scale(1);
}
.cc-radio-input:checked {
    border-color: var(--cc-main-color);
}

/* --- INPUTS: SLIDER & NUMBER --- */
.cc-slider-label-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* gap-4 */
}
.cc-slider-label {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--cc-text-medium);
}
.cc-slider-input-number {
    width: 6rem !important; /* w-24 */
    padding: 0.5rem !important; /* p-2 */
    border: 1px solid var(--cc-border-color) !important;
    border-radius: 0.375rem !important; /* rounded-md */
    text-align: center !important;
}
.cc-slider-input-range {
    width: 100%;
    height: 0.5rem; /* h-2 */
    background-color: #e5e7eb; /* bg-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.cc-slider-input-range:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.3); /* focus:ring-4 focus:ring-red-600/30 */
}
.cc-slider-input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--cc-main-color);
    border-radius: 50%;
    cursor: pointer;
}
.cc-slider-input-range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--cc-main-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* --- INPUTS: SELECT --- */
.cc-select-label {
    display: block;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--cc-text-medium);
    margin-bottom: 0.5rem;
}
.cc-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cc-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- BOTÕES DE OBJETIVO E OPÇÕES (CORRIGIDO) --- */
.cc-objective-button-label input[type="radio"]:checked + .cc-objective-button {
    background-color: var(--cc-main-color);
    color: white;
    border-color: var(--cc-main-color-dark);
}
.cc-objective-button {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cc-border-color);
    border-radius: 0.375rem;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease-in-out;
}
.cc-objective-button:hover {
    background-color: #f3f4f6; /* gray-100 */
}
/* A regra 'display: none' foi removida daqui para permitir que o JS controle a visibilidade */
.cc-objective-options {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    /* A regra de visibilidade puramente por CSS foi removida pois o JS já faz isso */
}
.cc-options-title {
    font-weight: 500;
    color: var(--cc-text-medium);
    margin-bottom: 0.5rem;
}

/* --- COMPONENTES AUXILIARES --- */
.cc-info-box {
    margin-top: 1rem; /* mt-4 */
    padding: 0.75rem; /* p-3 */
    background-color: var(--cc-bg-light);
    color: var(--cc-text-light);
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
}
.cc-percentage-warning {
    padding: 0.5rem;
    background-color: #fee2e2; /* red-100 */
    color: #b91c1c; /* red-700 */
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.cc-hidden {
    display: none !important;
}
.cc-sr-only { /* Screen-reader only */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.cc-pt-2 { padding-top: 0.5rem; }
.cc-mt-2 { margin-top: 0.5rem; }
.cc-mt-8 { margin-top: 2rem; }
.cc-mb-4 { margin-bottom: 1rem; }
.cc-mb-8 { margin-bottom: 2rem; }
.cc-text-center { text-align: center; }

/* --- BOTÕES PRINCIPAIS --- */
.cc-submit-button, .cc-change-data-button {
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 300ms;
    cursor: pointer;
    border: none;
}
.cc-submit-button {
    background-color: var(--cc-main-color);
    margin-top: 2.5rem !important; /* !mt-10 */
}
.cc-submit-button:hover {
    background-color: var(--cc-main-color-dark);
}
.cc-change-data-button {
    background-color: #4b5563; /* bg-gray-600 */
}
.cc-change-data-button:hover {
    background-color: #374151; /* bg-gray-700 */
}

/* --- TELA DE RESULTADOS --- */
.cc-results-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--cc-text-dark);
}
.cc-results-subtitle {
    color: var(--cc-text-dark);
    margin-bottom: 0.25rem; /* mb-1 */
}
.cc-results-calories {
    font-size: 3.75rem; /* text-6xl */
    line-height: 1;
    font-weight: 800; /* font-extrabold */
    color: var(--cc-main-color);
    margin-top: 0.5rem; /* my-2 */
    margin-bottom: 0.5rem;
}
.cc-results-calories-label {
    color: var(--cc-text-light);
}
.cc-results-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem; /* pt-6 */
    margin-bottom: 2rem; /* mb-8 */
}
.cc-results-section-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--cc-text-dark);
    margin-bottom: 1rem;
}

/* --- GRID DE MACROS --- */
.cc-macros-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem; /* gap-2 */
    font-size: 0.875rem; /* text-sm */
    align-items: center;
}
.cc-macros-header {
    font-weight: 700;
    color: var(--cc-text-light);
}
.cc-macros-label {
    font-weight: 700;
    color: var(--cc-text-light);
    text-align: right;
    padding-right: 0.5rem; /* pr-2 */
}
.cc-macros-label-meals {
    font-weight: 400; /* font-normal */
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
}
.cc-macro-item {
    padding: 0.5rem; /* p-2 */
    border-radius: 0.25rem; /* rounded */
    text-align: center;
}
.cc-macro-protein { background-color: #eff6ff; /* bg-blue-50 */ }
.cc-macro-carb { background-color: #f0fdf4; /* bg-green-50 */ }
.cc-macro-fat { background-color: #fefce8; /* bg-yellow-50 */ }
.cc-macro-percentage {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
}
@media (min-width: 640px) {
    .cc-macros-grid {
        font-size: 1rem; /* sm:text-base */
    }
}

/* --- LISTA DE DADOS DE REFERÊNCIA --- */
.cc-data-list {
    text-align: left;
}
.cc-data-item {
    display: flex;
    justify-content: space-between;
    color: var(--cc-text-light);
    margin-bottom: 0.25rem;
}