@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap');

/* DEFINIÇÃO DE TEMAS */
[data-theme="blue"] {
    --primary: #00e5ff;
    --primary-dim: rgba(0, 229, 255, 0.2);
    --primary-bg: rgba(0, 229, 255, 0.05);
}
[data-theme="red"] {
    --primary: #ff3333;
    --primary-dim: rgba(255, 51, 51, 0.2);
    --primary-bg: rgba(255, 51, 51, 0.05);
}

:root {
    --bg-dark: #0a0c10;
    --panel-bg: #161b22;
    --text-main: #c9d1d9;
    --accent: #30363d;
    --success: #2ea043;
    --warning: #d29922;
    --danger: #f85149;
    --purple: #8957e5;
}

body { font-family: 'Rajdhani', sans-serif; background-color: var(--bg-dark); color: var(--text-main); margin: 0; padding: 15px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }

.top-bar { width: 100%; max-width: 1400px; display: flex; justify-content: space-between; align-items: center; background: var(--panel-bg); padding: 12px 25px; border-radius: 8px; margin-bottom: 15px; box-sizing: border-box; border-bottom: 2px solid var(--accent); }

.brand-logo { font-family: 'Orbitron', sans-serif; font-size: 1.6em; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.brand-logo span { color: var(--primary); transition: 0.3s; }
.logo-icon { width: 28px; height: 28px; background: var(--primary); border-radius: 4px; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.logo-icon::after { content: ''; width: 10px; height: 10px; background: var(--bg-dark); border-radius: 50%; }

.controls { display: flex; gap: 8px; align-items: center; }

.theme-toggle { background: var(--bg-dark); color: var(--primary); border: 1px solid var(--primary); padding: 6px 10px; border-radius: 4px; cursor: pointer; font-family: 'Orbitron'; font-size: 0.7em; transition: 0.3s; font-weight:bold;}
.theme-toggle:hover { background: var(--primary); color: #000; }

.main-container { width: 100%; max-width: 1400px; display: flex; gap: 15px; align-items: flex-start;}
.col-left { flex: 0 0 350px; display: flex; flex-direction: column; gap: 15px;}
.col-right { flex: 1; display: flex; flex-direction: column; gap: 15px; width: 100%; }

.export-box { background: var(--bg-dark); border-radius: 8px; padding: 20px; border: 1px solid var(--accent); position: relative; width: 100%; box-sizing: border-box; }

.panel { background-color: var(--panel-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--accent); }
h2 { font-family: 'Orbitron', sans-serif; color: var(--primary); font-size: 1.1em; border-bottom: 1px solid var(--accent); padding-bottom: 6px; margin-top: 0; text-transform: uppercase; transition: 0.3s;}

.section-title { color: #8b949e; font-size: 0.8em; text-transform: uppercase; margin-top: 10px; margin-bottom: 6px; font-weight: bold; border-left: 3px solid var(--primary); padding-left: 6px; transition: 0.3s;}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.full-width { grid-column: span 2; }

input, select { width: 100%; padding: 6px 8px; background-color: rgba(0,0,0,0.5); border: 1px solid var(--accent); color: #fff; border-radius: 4px; font-family: 'Rajdhani', sans-serif; font-size: 0.95em; outline: none; transition: 0.3s; box-sizing: border-box; }
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 5px var(--primary-dim); }
input::placeholder { color: #5c6773; font-size: 0.9em; }

.select-clinico { border-color: var(--warning); color: var(--warning); font-weight: bold;}
.select-clinico:focus { border-color: #fff; color: #fff; }

button { padding: 8px 12px; font-family: 'Orbitron', sans-serif; font-weight: bold; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: 0.3s; border: none; font-size: 0.75em; }
.btn-primary { background: var(--primary); color: #000; width: 100%; margin-top: 5px; transition: 0.3s; }
.btn-outline { background: transparent; color: var(--text-main); border: 1px solid var(--accent); }
.btn-pdf { background: #ff3366; color: #fff; }
.btn-png { background: var(--purple); color: #fff; }
.btn-green { background: var(--success); color: #fff; }

/* RELATORIO AREA */
.header-relatorio { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--accent); padding-bottom: 10px; margin-bottom: 15px; }
.header-relatorio h2 { border: none; margin: 0; padding: 0; font-size: 1.5em; text-transform: uppercase; }
.info-data { text-align: right; color: #8b949e; font-size: 0.9em; }

.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 15px; }
.metric-card { background: rgba(0,0,0,0.3); padding: 8px; text-align: center; border-radius: 6px; border: 1px solid var(--accent); display: flex; flex-direction: column; justify-content: center;}
.metric-card .label { font-size: 0.7em; color: #8b949e; text-transform: uppercase; font-weight: bold; line-height: 1.1; margin-bottom: 3px; }
.metric-card .value { font-family: 'Orbitron', sans-serif; font-size: 1.3em; color: var(--primary); font-weight: bold; margin-top: 2px; transition: 0.3s;}
.metric-card .delta { font-size: 0.75em; font-weight: bold; margin-top: 4px; font-family: 'Rajdhani', sans-serif; }

.tmb-card { border-color: var(--warning); background: rgba(210, 153, 34, 0.05); }
.tmb-card .value { color: var(--warning); font-size: 1.5em; }
.tmb-card .sub-label { font-size: 0.7em; color: #8b949e; display: block; margin-top: 2px;}

/* TABELA DE DIAGNÓSTICO CLÁSSICA */
.diagnosis-container { background: rgba(0,0,0,0.2); border: 1px solid var(--accent); border-radius: 6px; margin-bottom: 15px; overflow: hidden; }
.diag-header-bar { padding: 6px 15px; font-family: 'Orbitron', sans-serif; font-weight: bold; font-size: 1em; color: #fff; transition: background 0.3s; }
.diag-body { padding: 12px 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.diag-col h4 { margin: 0 0 5px 0; font-family: 'Orbitron', sans-serif; font-size: 0.8em; text-transform: uppercase; }
.diag-col p { margin: 0; font-size: 0.9em; color: #c9d1d9; line-height: 1.3; text-align: justify; outline: none; transition: 0.3s; }
.title-corp { color: var(--primary); transition: color 0.3s;}
.title-nutri { color: var(--warning); }
.title-treino { color: var(--success); }

.fat-distribution { background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.2); padding: 8px; border-radius: 4px; margin-bottom: 15px; text-align: center; font-size: 0.9em;}
.fat-distribution span { font-weight: bold; color: var(--danger); text-transform: uppercase; }

.visual-area { display: flex; gap: 15px; height: 350px; }
.chart-wrapper { flex: 2; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px solid var(--accent); padding: 10px; display: flex; justify-content: center; align-items: center; position: relative; }
.measures-wrapper { flex: 1; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px solid var(--accent); padding: 12px; overflow-y: auto; display: flex; flex-direction: column;}

.measure-item { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--accent); padding: 3px 0; font-size:0.85em;}
.measure-item span.val { font-weight: bold; color: var(--primary); transition: color 0.3s; }

.chart-explanation { font-size: 0.75em; color: #8b949e; text-align: justify; margin-top: auto; border-top: 1px solid var(--accent); padding-top: 8px; line-height: 1.2;}

.export-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--accent); }
.export-footer .logo-text { font-family: 'Orbitron', sans-serif; color: var(--primary); font-size: 1em; font-weight: bold; text-transform: uppercase;}

.toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-slider { width: 28px; height: 14px; background-color: var(--accent); border-radius: 20px; position: relative; }
.toggle-slider::before { content: ""; position: absolute; width: 10px; height: 10px; background-color: #8b949e; border-radius: 50%; top: 2px; left: 2px; transition: 0.3s; }
.toggle-switch input:checked + .toggle-slider { background-color: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { background-color: #000; transform: translateX(14px); }

/* ESTILOS DO PLANO ALIMENTAR */
.diet-meal { background: rgba(0,0,0,0.3); border-left: 3px solid var(--primary); margin-bottom: 10px; padding: 10px; border-radius: 0 4px 4px 0; }
.diet-meal-title { font-family: 'Orbitron', sans-serif; font-size: 0.95em; color: #fff; margin-bottom: 5px; text-transform: uppercase; font-weight: bold;}
.diet-meal-items { list-style: none; padding-left: 0; margin: 0; font-size: 0.9em; }
.diet-meal-items li { margin-bottom: 4px; padding-left: 15px; position: relative; }
.diet-meal-items li::before { content: "•"; color: var(--primary); position: absolute; left: 0; font-weight: bold; }
[contenteditable="true"] { cursor: text; padding: 2px; border-radius: 3px; transition: background 0.3s; }
[contenteditable="true"]:hover { background: rgba(255,255,255,0.05); }
[contenteditable="true"]:focus { background: rgba(0,0,0,0.5); outline: 1px dashed var(--primary); }

/* BOTÃO DE EDIÇÃO INLINE */
.btn-tiny-edit {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: 0.3s;
}
.btn-tiny-edit:hover {
    background: var(--success);
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    body { padding: 10px; }
    .top-bar { flex-direction: column; gap: 10px; text-align: center; }
    .controls { flex-wrap: wrap; justify-content: center; width: 100%; }
    .main-container { flex-direction: column; }
    .col-left { flex: auto; width: 100%; }
    
    .export-box:not(.exporting) .header-relatorio { flex-direction: column; align-items: center; text-align: center; gap: 5px; }
    .export-box:not(.exporting) .metrics-grid { grid-template-columns: repeat(3, 1fr); }
    .export-box:not(.exporting) .diag-body { grid-template-columns: 1fr; gap: 10px; text-align: left; }
    .export-box:not(.exporting) .visual-area { flex-direction: column; height: auto; }
    .export-box:not(.exporting) .chart-wrapper { height: 300px; }
    .export-box:not(.exporting) .export-footer { flex-direction: column; text-align: center; gap: 8px; }
}

/* ========================================================= */
/* CORREÇÕES ABSOLUTAS PARA O HTML2CANVAS (PDF/PNG ESCURO)   */
/* ========================================================= */
.exporting {
    /* Força as variáveis globais a existirem no momento da "foto" */
    --bg-dark: #0a0c10 !important;
    --panel-bg: #161b22 !important;
    --text-main: #c9d1d9 !important;
    --accent: #30363d !important;
    --success: #2ea043 !important;
    --warning: #d29922 !important;
    --danger: #f85149 !important;
    --purple: #8957e5 !important;
    
    width: 1100px !important; 
    max-width: none !important; 
    padding: 20px !important;
}

.exporting[data-theme="blue"] {
    --primary: #00e5ff !important;
    --primary-dim: rgba(0, 229, 255, 0.2) !important;
    --primary-bg: rgba(0, 229, 255, 0.05) !important;
}

.exporting[data-theme="red"] {
    --primary: #ff3333 !important;
    --primary-dim: rgba(255, 51, 51, 0.2) !important;
    --primary-bg: rgba(255, 51, 51, 0.05) !important;
}

.exporting .diag-body { 
    grid-template-columns: 1fr 1fr 1fr !important; 
    text-align: left !important; 
}

/* Oculta o botão de edição no PDF e PNG */
.exporting .btn-tiny-edit {
    display: none !important;
}