/* ==========================================================
   CSS Específico - Calculadora do Sono (Padrão V5)
   ========================================================== */

/* --- [BASE V5] Estrutura --- */
.tool-container { max-width: 800px; } /* Largura padrão */

.breadcrumbs { margin-bottom: var(--spacing-md); font-size: 0.9rem; color: var(--c-text-secondary); }
.breadcrumbs a { color: var(--c-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary); }
.breadcrumbs span { margin: 0 0.25rem; }

.category-header { 
    text-align: center; 
    margin-bottom: var(--spacing-xl); 
}
.category-header h1 { font-size: 2.5rem; margin-bottom: var(--spacing-sm); }
.category-header p { font-size: 1.1rem; max-width: 60ch; margin: 0 auto; color: var(--c-text-secondary); }

/* Subnav */
.tool-subnav { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); justify-content: center; padding: var(--spacing-md); background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--border-radius-lg); margin-top: var(--spacing-xl); }
.tool-subnav a { font-weight: 600; color: var(--c-text-secondary); text-decoration: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); transition: all var(--transition-fast); }
.tool-subnav a:hover { background-color: var(--c-background); color: var(--c-text-primary); }
.tool-subnav a.is-active { background-color: var(--c-primary-alpha); color: var(--c-primary); }

/* --- CALCULADORA WRAPPER --- */
.calculator-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
}

/* --- SEÇÃO 1: HORA DE DORMIR --- */
#bedtime-calculator {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}

.sleep-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 1rem; }

.form-input {
    display: block; width: 100%;
    padding: 12px 15px;
    font-size: 1.1rem;
    color: var(--c-text-primary);
    background-color: var(--c-background);
    border: 1px solid var(--c-border);
    border-radius: var(--border-radius);
    transition: all 0.2s;
}
.form-input:focus { border-color: var(--c-primary); outline: 0; box-shadow: 0 0 0 3px var(--c-primary-alpha); }

/* Botão Principal */
.btn-primary {
    background-color: var(--c-primary);
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    width: 100%;
    margin-top: 10px;
}
.btn-primary:hover { background-color: var(--c-primary-dark); transform: translateY(-1px); }


/* --- SEÇÃO 2: HORA DE ACORDAR (Botão Especial) --- */
.wakeup-calculator-section {
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-background) 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    text-align: center;
}
.wakeup-calculator-section h3 { margin-top: 0; color: var(--c-text-primary); }
.wakeup-calculator-section p { color: var(--c-text-secondary); margin-bottom: 20px; }

.btn-wakeup {
    background: linear-gradient(135deg, #7B68EE, #50C878); /* Roxo para Verde */
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 104, 238, 0.3);
    transition: all 0.2s;
}
.btn-wakeup:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123, 104, 238, 0.4); }


/* --- RESULTADOS (Cards) --- */
.results-container { 
    margin-top: 30px; 
    display: none; 
    animation: fadeIn 0.5s ease; 
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}
.results-title { text-align: center; font-size: 1.2rem; margin-bottom: 20px; color: var(--c-text-primary); }

.sleep-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.sleep-card {
    background-color: var(--c-background);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s;
}
.sleep-card:hover { transform: translateY(-3px); }

/* Variações de Qualidade */
.sleep-card.ideal { border-color: var(--c-success); background-color: rgba(80, 200, 120, 0.05); }
.sleep-card.ideal .sleep-time { color: var(--c-success); }
.sleep-card.ideal .sleep-badge { background-color: var(--c-success); }

.sleep-card.good { border-color: var(--c-primary); background-color: rgba(18, 140, 126, 0.05); }
.sleep-card.good .sleep-time { color: var(--c-primary); }
.sleep-card.good .sleep-badge { background-color: var(--c-primary); }

.sleep-card.minimum { border-color: var(--c-warning); background-color: rgba(255, 183, 77, 0.05); }
.sleep-card.minimum .sleep-time { color: var(--c-warning); }
.sleep-card.minimum .sleep-badge { background-color: var(--c-warning); color: #000; }


.sleep-time { font-size: 2rem; font-weight: 700; margin-bottom: 5px; line-height: 1; }
.sleep-badge { display: inline-block; font-size: 0.75rem; color: #fff; padding: 4px 10px; border-radius: 20px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
.sleep-details { font-size: 0.85rem; color: var(--c-text-secondary); }
.sleep-details .cycles { font-weight: 600; display: block; margin-bottom: 2px; }

.results-note { text-align: center; font-size: 0.9rem; color: var(--c-text-secondary); margin-top: 20px; background-color: var(--c-background); padding: 10px; border-radius: 8px; }

/* --- [BASE V5] Conteúdo SEO --- */
.tool-content-wrapper { max-width: 75ch; margin-left: auto; margin-right: auto; margin-top: var(--spacing-xl); padding: 0 var(--spacing-sm); }
.tool-content-wrapper h2 { font-size: 1.8rem; margin-bottom: var(--spacing-md); }
.tool-content-wrapper h3 { font-size: 1.3rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }
.tool-content-wrapper p, .tool-content-wrapper ol { font-size: 1.05rem; line-height: 1.7; margin-bottom: var(--spacing-lg); }
.tool-content-wrapper li { margin-bottom: 10px; }

/* Outras Categorias */
.other-tools-section { padding-top: var(--spacing-xl); }
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: var(--spacing-lg); }
.grid.category-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }

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