:root {
    /* Cores Padrão (serão sobrescritas pelo JS) */
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --input-bg: #334155;
    --border: #475569;
    --grad-primary: linear-gradient(135deg, #3b82f6, #2563eb);
    --grad-success: linear-gradient(135deg, #10b981, #059669);
    --grad-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --grad-gold: linear-gradient(135deg, #eab308, #ca8a04);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg); color: var(--text-main); padding: 14px 15px; padding-bottom: 80px; transition: background 0.3s; }
.container { max-width: 800px; margin: 0 auto; }

/* --- CORREÇÃO DOS CANTOS QUADRADOS --- */
.card, .modal-content, .login-box, .card-treino, .lista-preview {
    overflow: hidden; /* O SEGREDO: Corta tudo que vaza da borda */
}
/* ------------------------------------- */

.row { display: flex; gap: 10px; align-items: flex-start; }
.row-center { align-items: center !important; }
.form-group { margin-bottom: 20px; }

/* INPUTS E BOTÕES */
input, select, .btn, .btn-fake-select {
    width: 100%; height: 48px; padding: 0 12px; font-size: 1rem; border-radius: 8px; border: 1px solid var(--border); outline: none; transition: 0.2s; display: flex; align-items: center;
}
input, select { background: var(--input-bg); color: var(--text-main); }
input:focus, select:focus { border-color: #3b82f6; }

/* Botões */
.btn { justify-content: center; text-transform: uppercase; font-weight: 600; color: white; cursor: pointer; font-size: 0.85rem; letter-spacing: 0.5px; }
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--grad-primary); border: none; }
.btn-success { background: var(--grad-success); border: none; }
.btn-secondary { background: #64748b; color: white; border: none; }
.btn-edit { background: var(--grad-gold); border: none; }
.btn-danger-sm { background: var(--grad-danger); height: 36px; padding: 0 15px; font-size: 0.75rem; border: none; }
.btn-add { background: var(--grad-success); border: none; font-size: 1rem;}
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn-theme { width: 40px; height: 40px; background: var(--card-bg); border: 1px solid var(--border); font-size: 1.2rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;}

/* HEADER E TEXTO */
header h1 { font-size: 1.8rem; background: var(--grad-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
header p { color: var(--text-muted); }
label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; }

/* CARDS */
.card { background: var(--card-bg); padding: 25px; border-radius: 16px; border: 1px solid var(--border); margin-bottom: 25px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.grid-treinos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Card Principal (Mantém flex column para alinhar itens verticalmente) */
.card-treino { 
    background: var(--card-bg); 
    padding: 20px; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
}

/* O Botão "Ver Detalhes" empurra tudo para baixo */
.card-treino .btn-primary {
    margin-top: auto; /* <--- O TRUQUE ESTÁ AQUI */
    margin-bottom: 10px;
}

/* Os botões de ação apenas ficam no final, sem empurrar mais nada */
.card-actions { 
    display: flex; 
    gap: 8px; 
    margin-top: 0; /* <--- AQUI MUDOU DE 'auto' PARA '0' */
}
.card-actions .btn { flex: 1; height: 36px; font-size: 0.75rem; }

/* AGENDA / CALENDÁRIO (ATUALIZADO) */
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: bold; font-size: 1.1rem; color: var(--text-main); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.cal-day-name { font-size: 0.75rem; color: var(--text-muted); font-weight: bold; margin-bottom: 5px; }

.cal-day { 
    aspect-ratio: 1; 
    display: flex; 
    flex-direction: column; /* Empilha texto e número */
    align-items: center; 
    justify-content: center; 
    border-radius: 8px; 
    cursor: pointer; 
    border: 1px solid transparent; 
    position: relative;
    background: rgba(255,255,255,0.03); 
    color: var(--text-muted);
    overflow: hidden; /* Garante que texto não vaze */
    padding: 2px;
}
.cal-day:hover { border-color: #3b82f6; }

/* Estilo do Dia Treinado */
.cal-day.treinado { 
    background: rgba(16, 185, 129, 0.15); 
    border: 1px solid #10b981; 
}

/* Texto do Treino (Pequeno) */
.cal-treino-nome {
    font-size: 0.55rem;
    color: #10b981;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;      /* Não quebra linha */
    overflow: hidden;         /* Corta o excedente */
    text-overflow: ellipsis;  /* Adiciona ... */
    max-width: 100%;
    margin-bottom: 2px;
}

/* Número do Dia */
.cal-day-num {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-main);
    line-height: 1;
}
.cal-day.treinado .cal-day-num { color: #10b981; }

.cal-day.hoje { border: 1px dashed #3b82f6; }
.cal-day.vazio { background: transparent; cursor: default; border: none; }

/* TABS E LISTAS */
.tabs { display: flex; gap: 5px; margin-bottom: 20px; background: var(--card-bg); padding: 5px; border-radius: 12px; overflow-x: auto; border: 1px solid var(--border); }
.tab-btn { flex: 1; min-width: 80px; height: 40px; background: transparent; border: none; color: var(--text-muted); border-bottom: 3px solid transparent; cursor: pointer; font-weight: 600; }
.tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.lista-preview { background: rgba(0,0,0,0.05); padding: 15px; border-radius: 8px; border: 1px dashed var(--border); }
.lista-preview li { background: var(--card-bg); padding: 12px; margin-bottom: 8px; border-radius: 6px; display: flex; flex-direction: column; border: 1px solid var(--border); position: relative; }
.li-header { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.obs-text { font-size: 0.8rem; color: #eab308; margin-top: 5px; font-style: italic; }
.detalhes-badge { font-size: 0.75rem; background: rgba(59, 130, 246, 0.2); padding: 2px 8px; border-radius: 4px; color: #3b82f6; font-weight: bold; margin-left:10px; }

/* LOGIN & MODAIS */
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0f172a; z-index: 5000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.login-box { background: #1e293b; padding: 30px; border-radius: 20px; width: 90%; max-width: 350px; text-align: center; border: 1px solid #475569; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.login-logo { width: 250px; height: auto; margin-bottom: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.login-input { margin-bottom: 10px; }

.hidden { display: none !important; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(5px); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: var(--card-bg); width: 95%; max-width: 500px; border-radius: 16px; border: 1px solid var(--border); height: 90vh; display: flex; flex-direction: column; position: relative; }
.modal-header, .modal-footer { padding: 15px 20px; border-color: var(--border); border-style: solid; background: rgba(0,0,0,0.05); }
.modal-header { border-bottom-width: 1px; display:flex; justify-content:space-between; align-items:center; }
.modal-footer { border-top-width: 1px; gap: 10px; display:flex; flex-direction:column; }
.modal-body { padding: 20px; overflow-y: auto; flex-grow: 1; }
.btn-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0;}

/* SELEÇÃO E EXERCÍCIOS */
/* Botão que finge ser um Select */
.btn-fake-select {
    width: 100%;
    height: 48px;
    background-color: var(--input-bg) !important; /* Força o fundo escuro/cinza */
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted); /* Cor do texto (cinza claro) */
    text-align: left;
    padding: 0 15px;
    font-size: 1rem;
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: none;
}

/* Quando um exercício for selecionado */
.btn-fake-select.selecionado {
    color: var(--text-main) !important; /* Cor do texto (branco no modo escuro) */
    font-weight: 600;
    border-color: #3b82f6;
}

.btn-fake-select::after {
    content: '▼';
    font-size: 0.8rem;
    opacity: 0.5;
}
.grupo-titulo { background: rgba(59, 130, 246, 0.1); color: #60a5fa; padding: 8px 15px; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }
.item-selecao { padding: 15px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; }
.serie-row { display: grid; grid-template-columns: 40px 1fr 1fr 40px; gap: 10px; align-items: center; margin-bottom: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
.serie-input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text-main); text-align: center; height: 30px; border-radius: 0;}
.check-serie { width: 24px; height: 24px; accent-color: #10b981; margin: 0 auto;}
.badge-descanso { grid-column: 1 / -1; text-align: right; font-size: 0.85rem; font-family: monospace; margin-top: 5px; color: #94a3b8; display: none; }
.badge-descanso.ativo { display: block; color: #10b981; animation: fadeIn 0.5s ease; }

/* EXTRAS */
.descanso-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.96); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; }
.timer-big { font-size: 5rem; font-weight: 800; color: #3b82f6; margin: 20px 0; font-family: monospace; }
.btn-descanso { background: white; color: black; font-size: 1.1rem; padding: 0 40px; height: 60px; border-radius: 50px; font-weight: 800; margin-top: 30px; box-shadow: 0 0 20px rgba(255,255,255,0.3); }
.backup-area { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 20px; text-align: center; }
.chart-container { position: relative; height: 250px; width: 100%; margin-bottom: 20px; }
.card-historico { background: var(--card-bg); padding: 20px; border-radius: 12px; border-left: 5px solid #10b981; margin-bottom: 15px; }
.hist-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.hist-data { color: var(--text-muted); font-size: 0.8rem; background: var(--bg); padding: 4px 8px; border-radius: 4px; }
.hist-stats { display: flex; gap: 15px; margin-top: 10px; font-size: 0.9rem; color: #e2e8f0; }
.tag-foco { color: #facc15; font-weight: bold; }
.tag-feeling { font-weight: bold; text-transform: uppercase; font-size: 0.75rem; color:black; padding:3px 8px; border-radius:4px; }
.feeling-bom { background: #60a5fa; } .feeling-fácil { background: #4ade80; } .feeling-intenso { background: #facc15; } .feeling-insano { background: #f87171; }
.hist-actions { margin-top: 15px; padding-top: 10px; border-top: 1px solid #334155; display: flex; justify-content: flex-end; gap: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* BOTÕES NA AGENDA (Modal Detalhes) */
.agenda-card {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    animation: fadeIn 0.3s;
}

.agenda-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.btn-agenda-sm {
    flex: 1;
    height: 32px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.2s;
}

.btn-agenda-edit { background: #3b82f6; color: white; }
.btn-agenda-delete { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; }
.btn-agenda-delete:hover { background: #ef4444; color: white; }

/* =========================================
   STATUS DO TREINO (SEMÁFORO)
   ========================================= */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: relative;
}

/* Efeito de "Glow" (Brilho/Pulsação) */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Status: Não treinado na semana (Vermelho) */
.status-red {
    background-color: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

/* Status: Treinado na semana (Verde) */
.status-green {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
}

/* Status: Recomendado para hoje (Amarelo) */
.status-yellow {
    background-color: #facc15;
    box-shadow: 0 0 10px #facc15;
    animation: pulse-glow 2s infinite; /* Faz o amarelo piscar para chamar atenção */
}

/* CARD DO INSTAGRAM */
.insta-card {
    width: 100%;
    max-width: 320px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 2px solid #3b82f6;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho no fundo */
.insta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    z-index: 0;
}

.insta-header { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.75rem; color: #94a3b8; margin-bottom: 15px; position: relative; z-index: 1; letter-spacing: 1px; }
.insta-card h1 { font-size: 1.5rem; color: white; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.insta-date { font-size: 0.9rem; color: #64748b; margin-bottom: 20px; position: relative; z-index: 1; }

.insta-stats { display: flex; justify-content: space-around; margin-bottom: 10px; position: relative; z-index: 1; }
.stat-box { display: flex; flex-direction: column; }
.stat-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; }
.stat-value { font-size: 1.2rem; font-weight: bold; color: #3b82f6; }

.insta-footer { margin-top: 20px; font-size: 0.7rem; font-style: italic; color: #64748b; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; position: relative; z-index: 1; }

/* --- ESTILOS DO PERFIL --- */
.profile-container {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.profile-photo-area {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 3px solid #3b82f6;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 auto; /* Centraliza no mobile */
}

.profile-photo-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-photo {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.6rem;
    text-align: center;
    padding: 3px 0;
}

.profile-data {
    flex-grow: 1;
    width: 100%;
}

.medidas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.input-medida {
    text-align: center;
    padding: 0 5px;
    height: 40px;
}

@media (max-width: 480px) {
    .profile-container {
        flex-direction: column;
        text-align: center;
    }
}

/* --- NOVOS ESTILOS (V2) --- */

/* MODO FOCUS (Fica Gigante e Limpo) */
body.focus-mode header, 
body.focus-mode .tabs, 
body.focus-mode .modal-header .btn-close,
body.focus-mode #modalListaExercicios .exercicio-container:not(.active-focus) {
    display: none !important;
}

body.focus-mode .modal-content {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; border: none; z-index: 9999;
}

body.focus-mode .active-focus {
    display: block !important;
    transform: scale(1.1);
    margin-top: 50px;
}

.btn-focus-toggle {
    position: absolute; top: 10px; right: 10px; z-index: 100;
    background: transparent; border: 1px solid rgba(255,255,255,0.2); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.7rem;
}

/* DROP-SETS */
.drop-row {
    margin-left: 20px;
    border-left: 3px solid #facc15;
    background: rgba(250, 204, 21, 0.1) !important;
}

/* PERIODIZAÇÃO & CONQUISTAS */
.badge-periodizacao {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; font-weight: bold;
    margin-left: 10px; display: inline-block;
}
.per-forca { background: #8b5cf6; color: white; } /* Roxo */
.per-hiper { background: #10b981; color: white; } /* Verde */
.per-resis { background: #facc15; color: black; } /* Amarelo */

.gamification-bar {
    display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; margin-bottom: 20px;
}
.medalha {
    min-width: 60px; height: 60px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px solid #475569; position: relative; opacity: 0.4; filter: grayscale(1);
}
.medalha.conquistada { opacity: 1; filter: grayscale(0); border-color: #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.3); }

/* NUTRIÇÃO & MACROS */
.checklist-grid { display: grid; gap: 10px; }
.check-item { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; cursor: pointer; }
.macros-flex { display: flex; justify-content: space-around; margin-top: 15px; }
.macro-box { text-align: center; display: flex; flex-direction: column; }

/* MAPA DE LESÕES */
.lesao-ativa { fill: #ef4444 !important; animation: pulse 1s infinite; }

/* --- CORREÇÃO CARD INSTAGRAM (CENTRALIZADO E BONITO) --- */
.insta-card {
    width: 100%;
    max-width: 340px; /* Um pouco mais largo */
    margin: 0 auto;   /* OBRIGATÓRIO PARA CENTRALIZAR */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho de fundo */
.insta-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.insta-header { 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    font-size: 0.8rem; color: #94a3b8; margin-bottom: 20px; letter-spacing: 1px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;
}

.insta-card h1 { 
    font-size: 1.8rem; color: white; margin-bottom: 5px; 
    text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    background: linear-gradient(to right, #ffffff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Stats em Grid para ficar alinhado */
.insta-stats { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; 
    margin: 20px 0; background: rgba(255,255,255,0.03); 
    padding: 15px; border-radius: 12px;
}

.stat-box { display: flex; flex-direction: column; }
.stat-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; font-weight: bold;}
.stat-value { font-size: 1.3rem; font-weight: 800; color: #3b82f6; }

/* ÍCONES MACROS BONITOS */
.macro-box-icon {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.2s;
}
.macro-box-icon:hover { transform: translateY(-3px); border-color: #3b82f6; }
.macro-emoji { font-size: 1.8rem; margin-bottom: 5px; }
.macro-val { font-size: 1.2rem; font-weight: bold; color: white; }
.macro-label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; }

/* Periodização (Texto Legível) */
#badgeFase {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px;
    padding: 4px 10px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Ajuste para visibilidade do texto */
.sua-barra-ou-elemento {
    color: #FFFFFF !important;    /* Cor da fonte branca */
    text-shadow: none !important; /* Remove a sombra do texto */
}

/* Tenta pegar o texto do objetivo especificamente */
.progress-bar span, 
.progress-bar .badge, 
.barra-objetivo {
    color: #FFFFFF !important;     /* Branco Forçado */
    text-shadow: none !important;  /* Sem sombra */
    font-weight: bold !important;  /* Negrito para ajudar na leitura */
    z-index: 10;                   /* Garante que o texto fique POR CIMA da cor */
    position: relative;            /* Necessário para o z-index funcionar */
}

/* Adicione isso ao final do seu CSS */

/* Tente descobrir a classe daquele quadro cinza. 
   Chutei nomes comuns abaixo (.meta-diaria, .result-box, .dashboard-card), 
   mas você pode precisar Inspecionar Elemento para achar o nome certo. */

.meta-diaria, 
.resultado-container,
.card-destaque {
    background-color: var(--box-bg) !important;
    color: white !important; /* Garante que o texto dentro fique branco */
    border: 1px solid var(--border);
}

/* DICA: Se o texto "2661 kcal" amarelo ficar ruim no fundo rosa escuro, 
   você pode mudar a cor dele especificamente aqui também */

   /* --- CORREÇÃO TEMA BLOSSOM & CAIXA DE META --- */

/* 1. Força a caixa de resultado a usar a cor framboesa no tema rosa */
.meta-diaria, 
.resultado-container,
.box-destaque,
.card-treino[style*="background"], /* Tenta pegar se tiver estilo inline */
div[class*="resultado"],
div[class*="meta"] {
    /* Usa a variável que criamos no JS. Se não existir, usa cinza como fallback */
    background-color: var(--box-bg, #334155) !important;
    color: white !important;
    border: 1px solid var(--border);
}

/* 2. Garante que o texto "kcal" e números dentro dessa caixa fiquem visíveis */
.meta-diaria h3, 
.meta-diaria span,
div[class*="meta"] span {
    color: #fff !important; /* Texto branco */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 3. Remove o fundo cinza dos Inputs falsos e força a cor do tema */
.btn-fake-select {
    background-color: var(--input-bg) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* 4. Corrige a cor do ícone de seleção (a setinha) */
.btn-fake-select::after {
    color: var(--text-main);
}

/* ============================================================
   FORÇAR TEMA BLOSSOM (TUDO ROSA + FIX LOGIN E HISTÓRICO)
   Substitua o bloco anterior no final do style.css por este
   ============================================================ */

/* 1. Botões Cinzas (+ Novo, Importar) viram Rosa Salmão */
.btn-secondary, 
.btn-outline {
    background-color: var(--btn-secondary-bg, #64748b) !important;
    color: #881337 !important; 
    border-color: var(--border) !important;
}

/* 2. Botões Verdes (Adicionar) viram o Degradê Rosa */
.btn-success, 
.btn-add {
    background: var(--grad-success) !important;
    color: white !important;
    border: none !important;
}

/* 3. Cronômetro: Fundo Vinho e Números Rosas */
.descanso-overlay {
    background: var(--timer-bg, rgba(0,0,0,0.96)) !important;
}
.timer-big {
    color: var(--timer-color, #3b82f6) !important;
}

/* 4. Modais (Janelas internas) - Ficam Rosa */
.modal-content, 
.modal-header, 
.modal-footer {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}
/* Fundo escuro APENAS para modais internos (não Login) */
.modal-overlay {
    background: rgba(88, 28, 67, 0.85) !important;
    backdrop-filter: blur(5px);
}

/* 5. CORREÇÃO DO LOGIN (Fundo Original Escuro) */
.login-overlay {
    background-color: #0f172a !important; /* Volta para o azul escuro original */
}
/* A caixa de login em si fica rosa para combinar com o tema */
.login-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
}

/* 6. Inputs e Selects */
input, select, .btn-fake-select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* 7. Caixa de Meta Diária (Framboesa) */
.meta-diaria, .resultado-container, .card-destaque {
    background-color: var(--box-bg, #334155) !important;
    color: white !important;
}

/* ============================================================
   TRANSFORMAÇÃO DO HISTÓRICO (ADEUS VERDE E AZUL)
   ============================================================ */

/* Card do Histórico: Borda Esquerda vira Rosa em vez de Verde */
.card-historico {
    border-left-color: #db2777 !important; /* Pink Vibrante */
    background-color: var(--card-bg) !important;
}

/* Texto das estatísticas (estava cinza claro, sumia no rosa) */
.hist-stats {
    color: var(--text-main) !important; /* Vinho escuro para ler bem */
}

/* Data no histórico */
.hist-data {
    background-color: var(--input-bg) !important;
    color: var(--text-muted) !important;
}

/* --- TAGS DE SENSAÇÃO (FEELING) --- */
/* "Fácil" (era verde) -> Vira Rosa Suave */
.feeling-fácil {
    background-color: #f472b6 !important; 
    color: white !important;
}
/* "Bom" (era azul) -> Vira Roxo/Lilás */
.feeling-bom {
    background-color: #a855f7 !important; 
    color: white !important;
}
/* "Intenso" (era amarelo) -> Vira Salmão */
.feeling-intenso {
    background-color: #fb923c !important; 
    color: white !important;
}
/* "Insano" (era vermelho) -> Vira Vinho */
.feeling-insano {
    background-color: #be123c !important; 
    color: white !important;
}

/* --- BOLINHAS DE STATUS (SEMÁFORO) --- */
/* Verde (Treinado) -> Vira Pink */
.status-green {
    background-color: #db2777 !important;
    box-shadow: 0 0 8px #db2777 !important;
}
/* Amarelo (Hoje) -> Mantém Dourado ou muda para Laranja suave */
.status-yellow {
    background-color: #fbbf24 !important;
    box-shadow: 0 0 10px #fbbf24 !important;
}
/* Vermelho (Não foi) -> Vinho Escuro */
.status-red {
    background-color: #881337 !important;
    box-shadow: 0 0 8px #881337 !important;
}

/* Texto verde dentro do calendário */
.cal-treino-nome {
    color: #db2777 !important; /* Pink */
}
/* Borda e fundo do dia treinado no calendário */
.cal-day.treinado {
    background: rgba(219, 39, 119, 0.15) !important; /* Fundo Pink suave */
    border-color: #db2777 !important;
}
.cal-day.treinado .cal-day-num {
    color: #db2777 !important;
}

/* ============================================================
   AJUSTES INTELIGENTES DE TEMA (COMPATÍVEL COM TODOS)
   Cole isso no final do style.css
   ============================================================ */

/* 1. Botões Secundários (+ Novo, Importar) */
/* No Blossom usa Rosa Salmão; nos outros usa Cinza original (#64748b) */
.btn-secondary, 
.btn-outline {
    background-color: var(--btn-secondary-bg, #64748b) !important;
    border-color: var(--border) !important;
    /* Se for Blossom, o texto fica vinho. Se for outro, herda a cor padrão */
    color: var(--text-main) !important; 
}

/* 2. Cronômetro (Tela cheia) */
/* No Blossom fica Vinho; nos outros fica Preto Quase Opaco */
.descanso-overlay {
    background: var(--timer-bg, rgba(0,0,0,0.96)) !important;
}
.timer-big {
    color: var(--timer-color, #3b82f6) !important;
}

/* 3. Modais Internos (Fundo atrás da janela) */
/* No Blossom fica Vinho; nos outros fica Preto padrão */
.modal-overlay {
    background: var(--modal-overlay-bg, rgba(0,0,0,0.9)) !important;
}

/* 4. Caixa de Meta Diária e Resultados */
.meta-diaria, .resultado-container, .card-destaque {
    /* No Blossom usa Framboesa; nos outros usa Cinza (#334155) */
    background-color: var(--box-bg, #334155) !important;
    color: white !important;
}

/* 5. HISTÓRICO - Cores Dinâmicas */
.card-historico {
    /* Borda lateral: Pink no Blossom, Verde (#10b981) nos outros */
    border-left-color: var(--border-highlight, #10b981) !important;
}

/* Tags de Sensação (Feeling) */
.feeling-fácil   { background-color: var(--feel-facil, #4ade80) !important; }
.feeling-bom     { background-color: var(--feel-bom, #60a5fa) !important; }
.feeling-intenso { background-color: var(--feel-intenso, #facc15) !important; }
.feeling-insano  { background-color: var(--feel-insano, #f87171) !important; }

/* Status (Bolinhas do Semáforo e Calendário) */
.status-green {
    background-color: var(--status-green, #10b981) !important;
    box-shadow: 0 0 8px var(--status-green, #10b981) !important;
}
.status-red {
    background-color: var(--status-red, #ef4444) !important;
    box-shadow: 0 0 8px var(--status-red, #ef4444) !important;
}

/* Calendário - Dias Treinados */
.cal-day.treinado {
    background: var(--cal-treinado-bg, rgba(16, 185, 129, 0.15)) !important;
    border-color: var(--status-green, #10b981) !important;
}
.cal-day.treinado .cal-day-num {
    color: var(--status-green, #10b981) !important;
}
.cal-treino-nome {
    color: var(--status-green, #10b981) !important;
}

/* LOGIN: Mantivemos intocado para ficar escuro em todos os temas, 
   mas garantimos que a caixa respeite a cor do card do tema */
.login-box {
    background-color: var(--card-bg, #1e293b) !important;
}

/* ============================================================
   CORREÇÃO FINAL: CAIXA META DIÁRIA (ROSA NO BLOSSOM)
   Cole isso no final do style.css
   ============================================================ */

/* Este seletor inteligente procura por qualquer div que tenha 
   "meta", "resultado" ou "destaque" no nome da classe.
*/
.meta-diaria,
.resultado-container,
.card-destaque,
div[class*="meta"],       /* Pega classes como: .box-meta, .meta-box, .container-meta */
div[class*="resultado"],  /* Pega classes como: .resultado-box, .area-resultado */
div[class*="destaque"]    /* Pega classes como: .card-destaque */
{
    /* No Blossom usa Framboesa (#9f1239); nos outros usa Cinza (#334155) */
    background-color: var(--box-bg, #334155) !important;
    
    /* Garante que o texto fique branco para ler bem no fundo escuro/rosa */
    color: #ffffff !important;
    
    border: 1px solid var(--border) !important;
}

/* Garante que o número de calorias e títulos dentro dessa caixa fiquem brancos */
div[class*="meta"] h3,
div[class*="meta"] span,
div[class*="meta"] strong,
div[class*="resultado"] h3,
div[class*="resultado"] span {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* ============================================================
   CEREJAS DO BOLO (Acabamento Profissional)
   ============================================================ */

/* 1. SELEÇÃO DE TEXTO (Quando passa o mouse pra copiar) */
::selection {
    /* Usa a cor secundária do tema (Pink no Blossom, Azul no Cyber) */
    background: var(--text-muted); 
    color: #ffffff;
}
/* Para Firefox */
::-moz-selection {
    background: var(--text-muted);
    color: #ffffff;
}

/* 2. BARRA DE ROLAGEM (Scrollbar) MAIS ELEGANTE */
/* Funciona no Chrome, Edge e Safari */
::-webkit-scrollbar {
    width: 10px;               /* Largura da barra vertical */
    height: 10px;              /* Altura da barra horizontal */
}

::-webkit-scrollbar-track {
    background: var(--bg);     /* O fundo do trilho é a cor de fundo do site */
}

::-webkit-scrollbar-thumb {
    background-color: var(--border); /* A barra em si usa a cor da borda do tema */
    border-radius: 5px;        /* Deixa redondinho */
    border: 2px solid var(--bg); /* Cria um respiro entre a barra e o fundo */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted); /* Fica mais escura quando passa o mouse */
}

/* 3. FOCO NOS CAMPOS (Brilho ao digitar) */
/* Tira o azul padrão do navegador e põe a cor do tema */
input:focus, 
select:focus, 
textarea:focus,
.btn-fake-select:focus {
    border-color: var(--text-muted) !important;
    box-shadow: 0 0 0 3px var(--input-bg) !important; /* Cria um halo suave */
    outline: none;
}

/* ESTILOS BEACH TENNIS */
.bt-placar-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.bt-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bt-divisor { font-size: 2rem; font-weight: bold; color: var(--text-muted); opacity: 0.5; }

.bt-nome-time {
    background: transparent; border: none; text-align: center; 
    font-size: 1.2rem; font-weight: bold; color: var(--text-main); width: 100%;
}

.bt-pontos-grande {
    font-size: 4.5rem; font-weight: 800; line-height: 1;
    color: var(--text-main);
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.bt-games { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.btn-bt-add {
    width: 100%; max-width: 120px; height: 60px;
    border-radius: 12px; border: none; font-size: 1.1rem; font-weight: bold; cursor: pointer;
    background: var(--grad-primary); color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.1s;
}
.btn-bt-add:active { transform: scale(0.95); }

.bt-controles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#cronometro-bt { font-family: monospace; font-size: 1.2rem; color: var(--text-muted); border: 1px solid var(--border); padding: 5px 10px; border-radius: 5px; }

/* Fonte mais moderna */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

/* O Card Principal */
.scoreboard-card {
    background: linear-gradient(145deg, #1e2329, #161b20); /* Efeito 3D sutil */
    border-radius: 20px;
    box-shadow: 10px 10px 20px #0b0e11, -10px -10px 20px #293039; /* Neumorphism escuro */
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Títulos dos Times e Jogadores */
.team-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.player-names {
    font-size: 0.9rem;
    color: #a0a0a0; /* Cinza claro */
    margin-bottom: 15px;
}

/* Placar Gigante */
.score-display {
    font-size: 5rem;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Botões de Ação (Ponto) */
.btn-point {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    text-transform: uppercase;
}

/* Cores diferentes para cada time */
.btn-blue {
    background: linear-gradient(45deg, #2196F3, #21CBF3);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

.btn-orange { /* Se quiser diferenciar o outro lado */
    background: linear-gradient(45deg, #FF512F, #DD2476);
    box-shadow: 0 4px 15px rgba(221, 36, 118, 0.4);
}

/* Efeito ao clicar */
.btn-point:active {
    transform: scale(0.95);
}

/* Barra de controles inferior (Zerar, Novo Set, etc) */
.control-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.btn-control {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none; /* Tira o sublinhado se for link */
    transition: background 0.3s;
}

.btn-control:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Animação de Lesão (Piscar Roxo) */
@keyframes pulse-purple {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.lesao-ativa {
    fill: #a855f7 !important;   /* Roxo Vibrante */
    stroke: #d8b4fe !important; /* Borda Roxa Clara */
    animation: pulse-purple 1.5s infinite ease-in-out; /* O Efeito de Piscar */
    cursor: pointer;
}

.btn-icon-only {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    padding: 0; /* Remove padding extra */
}
.btn-icon-only:hover {
    transform: scale(1.1);
    border-color: #3b82f6;
}

/* --- CORREÇÃO FINAL: CARDS DE DESTAQUE E GORDURA --- */
.meta-diaria,
.resultado-container,
#boxGordura,     /* Card da Aba Perfil */
#boxHistoricoBF, /* Card do Modal */
#resultadoMacros /* Card da Nutrição */
{
    /* Usa a cor do input do tema (Rosa claro, Azul escuro, etc) */
    background-color: var(--input-bg) !important; 
    
    /* Usa a cor do texto do tema (Vinho, Branco, etc) */
    color: var(--text-main) !important; 
    
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Garante que os textos dentro não fiquem brancos se o fundo for claro */
.meta-diaria span, .meta-diaria strong, 
#boxGordura span, #boxGordura strong,
#boxHistoricoBF span, #boxHistoricoBF strong {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* Fundo escurecido */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}

/* A janela em si */
.modal-content {
    background: #1e1e1e;
    color: white;
    padding: 25px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-family: sans-serif;
}

/* Textos */
.label { font-size: 0.85em; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
h3 { margin: 5px 0 10px; color: #fff; }
h2 { margin: 5px 0; color: #4CAF50; } /* Verde para o próximo */

/* Cronômetro Gigante */
#timerDisplay {
    font-size: 4em;
    font-weight: bold;
    margin: 10px 0;
    font-variant-numeric: tabular-nums; /* Evita que os números pulem */
}

/* Botões de Feedback (RPE) */
.feedback-botoes { margin-bottom: 10px; }
.btn-rpe { border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin: 0 3px; font-weight: bold; color: #fff;}
.facil { background: #2ecc71; }
.medio { background: #f1c40f; color: #333; }
.dificil { background: #e74c3c; }

/* Botões de Tempo */
.controles-timer button {
    background: #333; color: white; border: 1px solid #555;
    padding: 5px 15px; border-radius: 20px; margin: 0 5px; cursor: pointer;
}

/* Botão Pular */
.btn-pular {
    margin-top: 20px; width: 100%; padding: 12px;
    background: #2196F3; color: white; border: none;
    border-radius: 8px; font-size: 1.1em; cursor: pointer;
}
.btn-pular:hover { background: #1976D2; }

/* Isso força a janela antiga de descanso a ficar invisível para sempre */
#telaDescanso {
    display: none !important;
}

/* MODAL: Ajuste para ocupar mais espaço em telas finas (Fold 5) */
.modal-content {
    background: var(--card-bg);
    /* Mudança Principal: width 98% em vez de 95% ou fixo */
    width: 98%; 
    max-width: 500px; /* Mantém limite em telas grandes */
    border-radius: 16px;
    border: 1px solid var(--border);
    height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Garante que não tenha margens externas empurrando */
    margin: 0 auto; 
}

/* Ajuste fino para os inputs dentro do modal ficarem lado a lado sem quebrar */
.serie-row { 
    display: grid; 
    /* Reduzimos o espaço da coluna de número (#) e do checkbox (OK) para dar espaço aos inputs */
    grid-template-columns: 30px 1fr 1fr 30px; 
    gap: 5px; /* Reduz o espaçamento entre colunas */
    align-items: center; 
    margin-bottom: 8px; 
    background: rgba(0,0,0,0.2); 
    padding: 8px 5px; /* Reduz padding lateral */
    border-radius: 8px; 
    border: 1px solid var(--border); 
}

/* Força os inputs a serem menores para caberem */
.serie-input { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid var(--border); 
    color: var(--text-main); 
    text-align: center; 
    height: 30px; 
    border-radius: 0;
    /* Importante: permite que o input encolha se precisar */
    width: 100%; 
    min-width: 0; 
    padding: 0;
    font-size: 0.95rem; /* Fonte levemente menor */
}

/* Ajuste no cabeçalho das colunas (Série, Kg, Reps, OK) */
#modalListaExercicios small {
    font-size: 0.65rem !important; /* Texto menor no cabeçalho */
    white-space: nowrap; /* Não deixa quebrar linha */
}

/* Ajuste específico para telas MUITO estreitas (como Fold fechado) */
@media (max-width: 360px) {
    .modal-content {
        width: 100%;
        height: 100%; /* Ocupa tela toda */
        border-radius: 0;
        border: none;
    }
    
    .modal-body {
        padding: 10px; /* Menos padding interno */
    }

    .serie-row {
        gap: 2px; /* Mínimo espaço possível */
    }
}

/* Efeito de Músculo Muito Treinado */
@keyframes pulsarVermelho {
    0% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
    50% { fill: #ff0000; filter: drop-shadow(0 0 8px #ff0000); }
    100% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
}

.pulsar-vermelho {
    animation: pulsarVermelho 1.5s infinite ease-in-out;
}

/* --- ANIMAÇÕES DO MAPA CORPORAL --- */

/* 1. Sugestão do Dia (Verde Neon Pulsante) */
@keyframes pulsarVerde {
    0% { fill: #10b981; filter: drop-shadow(0 0 2px #10b981); }
    50% { fill: #34d399; filter: drop-shadow(0 0 10px #34d399); }
    100% { fill: #10b981; filter: drop-shadow(0 0 2px #10b981); }
}
.pulsar-verde {
    animation: pulsarVerde 2s infinite ease-in-out;
    z-index: 10; /* Fica por cima */
}

/* 2. Atenção / Falta Treinar (Amarelo Alerta) */
@keyframes pulsarAmarelo {
    0% { fill: #ca8a04; opacity: 0.6; }
    50% { fill: #facc15; opacity: 1; }
    100% { fill: #ca8a04; opacity: 0.6; }
}
.pulsar-amarelo {
    animation: pulsarAmarelo 3s infinite ease-in-out;
}

/* 3. Muito Treinado (Vermelho Vivo - Já tínhamos criado, mas garante que está lá) */
@keyframes pulsarVermelho {
    0% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
    50% { fill: #ff0000; filter: drop-shadow(0 0 8px #ff0000); }
    100% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
}
.pulsar-vermelho {
    animation: pulsarVermelho 1.5s infinite ease-in-out;
}

/* --- LEGENDA DO MAPA CORPORAL (ATUALIZADO) --- */
.legenda-grid {
    display: flex;
    flex-direction: column; /* Um embaixo do outro */
    gap: 12px; /* Espaço entre as linhas */
    margin-top: 25px;
    background: transparent; /* Removemos o fundo cinza para ficar mais clean */
    padding: 0 10px;
    border: none;
}

.item-legenda {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Bolinhas Base */
.dot { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    display: inline-block; 
    flex-shrink: 0; /* Garante que a bolinha não amasse */
}

/* Cores das Bolinhas */
.dot-cinza { background: #475569; border: 1px solid var(--border); }
.dot-vermelho { background: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
.dot-amarelo { background: #facc15; animation: pulsarAmarelo 2s infinite; }

/* VERDE CORRIGIDO (Sem deslocar) */
.dot-verde { 
    background: #10b981; 
    animation: pulsarVerde 2s infinite;
}

/* ANIMAÇÃO CORRIGIDA (Efeito Radar - Não desloca) */
@keyframes pulsarVerde {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); /* A sombra cresce e desaparece */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Mantemos o amarelo piscando opacidade (simples e funcional) */
@keyframes pulsarAmarelo {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* FORÇAR CONTRASTE DOS TÍTULOS */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main); /* Garante que usa a cor do tema, não branco fixo */
}

/* Exceção: Textos dentro de caixas de destaque (Meta, Resultados) devem ser brancos */
.meta-diaria h3, .meta-diaria strong, 
.resultado-container h3, .resultado-container strong,
.btn-primary, .btn-success {
    color: #ffffff !important;
}
/* Se houver títulos brancos forçados no HTML, o CSS acima tenta respeitar,
   mas o ideal é deixar o var(--text-main) comandar. */

   /* --- RANKING & GAMIFICAÇÃO --- */
.ranking-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 12px;
    margin-top: 15px;
    border: 1px solid var(--border);
}

.rank-icon {
    font-size: 2.5rem; /* Tamanho do ícone */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border-radius: 50%;
    border: 2px solid #facc15;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
    animation: floatRank 3s infinite ease-in-out;
}

.rank-info {
    flex: 1;
}

.xp-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-top: 5px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #facc15, #b45309);
    border-radius: 10px;
    transition: width 1s ease;
    box-shadow: 0 0 10px #facc15;
}

@keyframes floatRank {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

@keyframes pulseBtn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --- TELA DE VITÓRIA --- */
.victory-card {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 2px solid #facc15;
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 0 50px rgba(250, 204, 21, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-box {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    margin-top: 5px;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

/* --- TELA DE VITÓRIA (CORRIGIDA E DOURADA) --- */
.victory-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; animation: fadeIn 0.5s;
}

.victory-card {
    /* Fundo Escuro com brilho dourado radial no centro */
    background: radial-gradient(circle at center, #422a00 0%, #0f172a 70%);
    border: 3px solid #facc15; /* Borda Dourada Grossa */
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    /* Sombra Dourada Brilhante */
    box-shadow: 0 0 50px rgba(250, 204, 21, 0.4); 
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho passando */
.victory-card::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,215,0,0.1), transparent);
    animation: shine 3s infinite;
    pointer-events: none;
}

.stat-box {
    background: rgba(0,0,0,0.3); /* Mais escuro para contraste */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(250, 204, 21, 0.3); /* Borda sutil dourada */
}

.stat-value { font-size: 1.4rem; font-weight: 800; color: #fff; }
.stat-label { font-size: 0.75rem; color: #facc15; text-transform: uppercase; margin-top: 5px; font-weight: bold; }

@keyframes shine {
    0% { transform: rotate(45deg) translateY(-100%); }
    100% { transform: rotate(45deg) translateY(100%); }
}

/* --- BOTÕES DE ESFORÇO (RPE) --- */
.btn-rpe {
    opacity: 0.3; /* Apagado por padrão */
    transform: scale(1);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Quando selecionado (classe adicionada via JS) */
.btn-rpe.selected {
    opacity: 1; /* Aceso */
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
    border-color: white;
}

/* BOLINHA INDICADORA NA SÉRIE */
.rpe-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 5px currentColor; /* Brilho da própria cor */
}

/* --- ESTILOS PARA ARRASTAR E SOLTAR (DRAG & DROP) --- */
.lista-preview li {
    cursor: grab; /* Mãozinha para indicar que pode pegar */
    transition: transform 0.2s, box-shadow 0.2s;
}

.lista-preview li.dragging {
    opacity: 0.5;
    background: #334155;
    border: 2px dashed #60a5fa;
    transform: scale(0.98);
}

.lista-preview li.drag-over {
    border-top: 2px solid #10b981; /* Linha verde indicando onde vai cair */
}

/* Ajuste no rodapé do modal de treino para caber o botão Cancelar */
#modalTreino .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-cancel {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    font-weight: bold;
    transition: 0.2s;
}
.btn-cancel:hover {
    background: #ef4444;
    color: white;
}

/* Garante que o modal fique na frente e centralizado */
#modalCardio {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8); /* Fundo escuro */
    z-index: 9999; /* Bem alto para ficar na frente de tudo */
    
    /* Centraliza o conteúdo */
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
}

/* Quando estiver visível (via JS) */
#modalCardio:not(.hidden) {
    display: flex;
}

/* --- DOCK DE MINIMIZADOS --- */
#dockMinimizados {
    position: fixed;
    bottom: 80px; /* Acima do rodapé se tiver, ou no canto */
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    align-items: flex-end;
}

.mini-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px 15px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    animation: slideIn 0.3s ease;
    transition: transform 0.2s;
    max-width: 150px;
}

.mini-card:active { transform: scale(0.95); }

.mini-icon { font-size: 1.2rem; }
.mini-info { font-size: 0.9rem; font-weight: bold; font-family: monospace; color: var(--text-main); }

/* Cores específicas */
.mini-treino { border-color: #3b82f6; background: rgba(59, 130, 246, 0.2); backdrop-filter: blur(5px); }
.mini-treino .mini-info { color: #60a5fa; }

.mini-descanso { border-color: #facc15; background: rgba(234, 179, 8, 0.2); backdrop-filter: blur(5px); }
.mini-descanso .mini-info { color: #facc15; }

/* Animação de pulso para indicar atividade */
@keyframes pulseMini {
    0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}
.pulsando { animation: pulseMini 2s infinite; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================
   MODO ZEN 2.0 (FINAL: TIMER + OLHO LADO A LADO)
   ========================================== */

/* 1. Base: Escuridão Total */
body.modo-zen .modal-overlay,
body.modo-zen .modal-content {
    background-color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    padding: 0 !important;
}

/* 2. O HEADER AGORA ALINHA OS DOIS NO CENTRO */
body.modo-zen .modal-header {
    background: #000 !important;
    border-bottom: 1px solid #333;
    display: flex !important;
    flex-direction: row !important; /* Garante que fiquem na mesma linha */
    justify-content: center !important; /* Centraliza o conjunto */
    align-items: center !important;
    padding: 15px !important;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 20px !important; /* Espaço entre o Timer e o Olho */
}

/* 3. TIMER (Grande, mas sem ocupar a linha toda) */
body.modo-zen #cronometroGlobal {
    font-size: 3.5rem !important;
    color: #facc15 !important;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
    margin: 0 !important;
    width: auto !important; /* Importante para caber o botão do lado */
    pointer-events: none;
    line-height: 1;
}

/* 4. BOTÃO DO OLHO (Lado a lado, não mais fixo) */
body.modo-zen #btnZenToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static !important; /* Tira do canto e coloca no fluxo */
    
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important;
    
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer;
    margin: 0 !important;
}

body.modo-zen #btnZenToggle:active {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(0.9);
}

/* 5. ESCONDER O RESTO (Sem quebrar o layout) */
/* Esconde os containers pais dos outros botões para não ocuparem espaço */
body.modo-zen .modal-header > div {
    display: contents !important; /* Ignora as divs de agrupamento originais */
}

/* Esconde elementos específicos */
body.modo-zen .modal-header h2, 
body.modo-zen .modal-header .btn-close,
body.modo-zen .modal-header button:not(#btnZenToggle), /* Esconde todos menos o olho */
body.modo-zen .modal-footer button.btn-secondary,
body.modo-zen .modal-footer button.btn:first-child {
    display: none !important;
}

/* 6. Lista de Exercícios (Foco) */
body.modo-zen #modalListaExercicios {
    padding: 20px !important;
    padding-bottom: 100px !important;
}

body.modo-zen .exercicio-container {
    opacity: 0.3;
    filter: grayscale(100%);
    transform: scale(0.95);
    transition: all 0.4s ease;
    border: 1px solid #333;
    margin-bottom: 30px;
}

body.modo-zen .exercicio-container:hover,
body.modo-zen .exercicio-container:focus-within {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.02);
    border: 2px solid #facc15;
    background: #111;
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.15);
    z-index: 10;
}

/* 7. Inputs Gigantes */
body.modo-zen .serie-row { background: #000; margin-bottom: 15px; }

body.modo-zen input.serie-input {
    height: 50px !important;
    font-size: 1.3rem !important;
    text-align: center;
    border: 1px solid #555;
    background: #222;
    color: #fff;
}

body.modo-zen input.serie-input:focus {
    border-color: #facc15;
    background: #333;
}

body.modo-zen input.check-serie {
    width: 40px !important;
    height: 40px !important;
    accent-color: #facc15;
}

/* 8. Footer Limpo */
body.modo-zen .modal-footer {
    background: #000 !important;
    border-top: 1px solid #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

body.modo-zen .modal-footer button.btn-success {
    width: 100% !important;
    height: 60px !important;
    font-size: 1.2rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ==========================================
   CARD DESAFIO SEMANAL (ESTILO CORRIGIDO)
   ========================================== */

.card-desafio {
    /* Fundo Roxo com Gradiente (Visual Premium) */
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    border: 1px solid #8b5cf6; /* Borda roxa mais clara */
    color: white;

    /* Formato do Card */
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px; /* Espaço para separar dos treinos */
    margin-top: 10px;
    
    /* Sombra neon roxa para destaque */
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);

    /* Necessário para o ícone de troféu ficar dentro do card */
    position: relative;
    overflow: hidden;
    
    /* Animação suave ao concluir */
    transition: all 0.4s ease;
}

/* Marca d'água de Troféu no fundo */
.card-desafio::before {
    content: "🏆";
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 6rem; /* Ícone Gigante */
    opacity: 0.15;   /* Bem transparente */
    transform: rotate(-15deg);
    pointer-events: none; /* Garante que não atrapalhe cliques */
    z-index: 0;
}

/* O conteúdo (texto) precisa ficar acima do troféu */
.card-desafio > div {
    position: relative;
    z-index: 1;
}

/* Checkbox Grande e Dourado */
.check-desafio {
    width: 30px;
    height: 30px;
    cursor: pointer;
    accent-color: #facc15; /* Fica amarelo ouro quando marcado */
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.5);
}

/* Textos */
#tituloDesafio {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 5px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

#descDesafio {
    font-size: 0.9rem;
    color: #e9d5ff; /* Lilás bem claro */
    line-height: 1.4;
}

/* Pequeno efeito ao clicar */
.card-desafio:active {
    transform: scale(0.98);
}

/* GRID DE CONSISTÊNCIA (PIXEL MAP) */
.pixel-map-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
}

/* --- CORREÇÃO DO GRID (PIXEL MAP) --- */

.pixel-grid {
    display: grid;
    /* Força 20 colunas para ficar alinhadinho */
    grid-template-columns: repeat(20, 1fr); 
    gap: 4px;
}

.pixel {
    aspect-ratio: 1/1;
    /* CORREÇÃO: Usamos uma cor cinza com transparência. 
       Funciona em qualquer tema (claro ou escuro) para mostrar o "vazio" */
    background-color: rgba(128, 128, 128, 0.15); 
    border-radius: 2px;
}

/* Dias Treinados (Ficam Verdes e Sólidos) */
.pixel.active-2 { 
    background-color: rgba(16, 185, 129, 0.6) !important; 
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
}

.pixel.active-3 { 
    background-color: #10b981 !important; 
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); 
    border: 1px solid #fff; 
}

/* WRAPPER DO HISTÓRICO (O Segredo do Corte) */
.historico-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
}

/* Estado MINIMIZADO (Padrão) */
.historico-wrapper.minimizado {
    max-height: 280px; /* Altura suficiente para ~2 cards */
}

/* O Degradê (Fade) para esconder o corte seco */
.historico-wrapper.minimizado::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Tamanho do degradê */
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

/* Estado EXPANDIDO */
.historico-wrapper.expandido {
    max-height: 5000px; /* Um valor bem alto para caber tudo */
}

/* O Botão de Ver Mais */
.btn-ver-mais {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-ver-mais:hover {
    background: var(--input-bg);
    color: var(--text-main);
}

/* --- PAINEL HIDRATAÇÃO (HYDRO) --- */
.hydro-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.water-tank-wrapper {
    position: relative;
    width: 80px;
    height: 120px;
    background: var(--input-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* O Líquido Azul */
.water-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* JS vai mudar isso */
    background: linear-gradient(to top, #3b82f6, #60a5fa);
    transition: height 0.5s ease-out;
    opacity: 0.8;
}

/* Efeito de Onda no topo da água */
.water-level::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: inherit;
    border-radius: 50%;
    opacity: 0.5;
}

/* Bolhas subindo (Animação) */
@keyframes bubble {
    0% { bottom: -10px; opacity: 0; transform: translateX(0); }
    50% { opacity: 1; }
    100% { bottom: 100%; opacity: 0; transform: translateX(5px); }
}

.bubble {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    animation: bubble 3s infinite ease-in;
}

/* Botões de Água */
.btn-water {
    background: var(--card-bg);
    border: 1px solid #3b82f6;
    color: #3b82f6;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
}
.btn-water:active { transform: scale(0.95); background: #3b82f6; color: white; }

/* Status do Jejum */
.jejum-status {
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    margin-top: 5px;
    display: inline-block;
}

/* HIDRATAÇÃO */
.hydro-container { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.water-tank-wrapper { position: relative; width: 80px; height: 120px; background: var(--input-bg); border: 2px solid var(--border); border-radius: 12px; overflow: hidden; }
.water-level { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(to top, #3b82f6, #60a5fa); transition: height 0.5s ease-out; opacity: 0.8; }
.water-level::before { content: ""; position: absolute; top: -5px; left: 0; width: 100%; height: 10px; background: inherit; border-radius: 50%; opacity: 0.5; }
.btn-water { background: var(--card-bg); border: 1px solid #3b82f6; color: #3b82f6; padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; font-weight: bold; }
.btn-water:active { transform: scale(0.95); background: #3b82f6; color: white; }
.jejum-status { font-size: 0.8rem; padding: 5px 10px; border-radius: 4px; background: var(--input-bg); border: 1px solid var(--border); margin-top: 5px; display: inline-block; }
@keyframes bubble { 0% { bottom: -10px; opacity: 0; } 50% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
.bubble { position: absolute; width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; animation: bubble 3s infinite ease-in; }

/* BOTÕES DE ADICIONAR/REMOVER SÉRIE */
.btn-add-serie {
    width: 100%;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px dashed #3b82f6;
    color: #3b82f6;
    border-radius: 6px;
    margin-top: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}
.btn-add-serie:hover {
    background: rgba(59, 130, 246, 0.2);
}

.btn-remove-serie {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 5px;
    transition: color 0.2s;
}
.btn-remove-serie:hover {
    color: var(--status-red);
}

/* Ajuste do Grid para caber o botão de remover */
.header-row-grid {
    display: grid; 
    /* Colunas: Remover | Num | Carga | Reps | Check */
    grid-template-columns: 25px 30px 1fr 1fr 40px; 
    gap: 10px; 
    margin-bottom: 5px; 
    padding: 0 5px;
}

.serie-row-grid {
    display: grid;
    /* Mesma grid do cabeçalho */
    grid-template-columns: 25px 30px 1fr 1fr 40px; 
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 5px;
}

/* FEEDBACK DE PROGRESSO NOS INPUTS */
.input-evoluir {
    border: 2px solid #10b981 !important; /* Verde */
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}

.input-recorde {
    border: 2px solid #facc15 !important; /* Dourado */
    background-color: rgba(250, 204, 21, 0.15) !important;
    color: #facc15 !important;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
    animation: pulseGold 2s infinite;
}

.input-regredir {
    border: 2px solid #ef4444 !important; /* Vermelho */
    color: #ef4444 !important;
    opacity: 0.8;
}

@keyframes pulseGold {
    0% { box-shadow: 0 0 5px rgba(250, 204, 21, 0.4); }
    50% { box-shadow: 0 0 12px rgba(250, 204, 21, 0.7); }
    100% { box-shadow: 0 0 5px rgba(250, 204, 21, 0.4); }
}

/* Ícone de troféu flutuante */
.trofeu-badge {
    position: absolute;
    right: -10px;
    top: -15px;
    font-size: 1.2rem;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    pointer-events: none; /* Para não atrapalhar o clique */
}

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

/* NÍVEIS DE FORÇA */
.badge-nivel-style {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: popInBadge 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popInBadge {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.nivel-iniciante { background: #94a3b8; color: #fff; } /* Cinza */
.nivel-interm { background: #10b981; color: #fff; }    /* Verde */
.nivel-avancado { background: #f59e0b; color: #fff; }  /* Laranja */
.nivel-elite { 
    background: linear-gradient(135deg, #ef4444, #b91c1c); 
    color: #fff; 
    border: 2px solid #facc15;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* =========================================
   ESTILO DE CARD PARA OS EXERCÍCIOS
   (Separação Visual Clara)
   ========================================= */

.exercicio-container {
    background-color: rgba(255, 255, 255, 0.03); /* Fundo sutilmente mais claro que a tela */
    border: 1px solid var(--border);             /* Borda fina */
    border-radius: 12px;                         /* Cantos arredondados */
    padding: 15px;                               /* Espaço interno (respiro) */
    margin-bottom: 25px;                         /* Espaço generoso entre um exercício e outro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    /* Sombra leve para dar profundidade */
    position: relative;                          /* Para posicionar elementos se precisar */
}

/* Linha separatória entre o Nome do Exercício e as Séries */
.exercicio-titulo {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Ajuste para telas muito pequenas (não colar na borda) */
@media (max-width: 380px) {
    .exercicio-container {
        padding: 10px;
    }
}

/* --- 1. TIMER VISUAL (COMBUSTÍVEL) --- */
/* O fundo que vai encher a tela */
#timerFuelBackground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Vai mudar via JS */
    background: linear-gradient(to top, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    z-index: 0; /* Fica atrás de tudo */
    transition: height 1s linear, background 0.5s;
    pointer-events: none;
}

/* Quando estiver acabando ( < 10s ) fica vermelho */
.fuel-critico {
    background: linear-gradient(to top, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1)) !important;
}

/* --- 2. CARD DE PERFORMANCE (DOPAMINA) --- */
.perf-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 1; /* Fica na frente do fuel */
}

.perf-evoluiu {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(0,0,0,0));
}
.perf-recorde {
    border-color: #facc15;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(0,0,0,0));
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.2);
}
.perf-manteve { 
    border-color: #3b82f6; /* Azul */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(0,0,0,0));
}
.perf-caiu { border-color: #ef4444; }

.perf-titulo { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.perf-valor { font-size: 1.8rem; font-weight: 900; margin: 5px 0; color: white; }
.perf-badge { 
    display: inline-block; padding: 4px 10px; border-radius: 20px; 
    font-size: 0.75rem; font-weight: bold; margin-top: 5px; 
}

/* HISTÓRICO NO DESCANSO */
.hist-row-descanso {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-main);
}
.hist-row-descanso:last-child {
    border-bottom: none;
}
.hist-destaque-carga {
    color: #facc15; /* Amarelo */
    font-weight: bold;
}

/* ==========================================
   CORREÇÃO VISUAL DEFINITIVA (CLEAN UI)
   ========================================== */

/* 1. CARTÕES (Cards) */
/* No modo escuro (Padrão), mantemos o fundo escuro sólido para leitura */
.card, .card-treino, .modal-content, .login-box {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: none !important; /* Removemos o vidro para evitar bugs */
}

/* 2. CORREÇÃO DO MODO CLARO (Light Mode) */
/* Força total para fundo BRANCO e texto ESCURO */
body.light-mode .card, 
body.light-mode .card-treino, 
body.light-mode .modal-content,
body.light-mode .login-box {
    background-color: #ffffff !important; /* Branco Puro */
    color: #1e293b !important;            /* Texto Escuro */
    border: 1px solid #e2e8f0 !important; /* Borda cinza bem clara */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; /* Sombra suave */
}

/* Corrige inputs no modo claro */
body.light-mode input, 
body.light-mode select, 
body.light-mode textarea {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* 3. MENU DE NAVEGAÇÃO (Abas) */
.tabs {
    position: fixed !important;  /* Cola no fundo da tela */
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;    /* Fica acima de tudo */
    
    background-color: var(--bg); /* Usa a cor do fundo do tema */
    border-top: 1px solid var(--border);
    
    padding-bottom: 15px !important; /* Espaço para dedos/iPhone */
    padding-top: 10px !important;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

/* Garante que o menu seja Branco no modo claro */
body.light-mode .tabs {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Botões da aba */
.tab-btn {
    background: transparent !important;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.7;
    transition: all 0.2s;
}

.tab-btn.active {
    color: var(--highlight) !important;
    opacity: 1;
    font-weight: bold;
    transform: scale(1.1);
}

/* 4. ESPAÇO NO FINAL DA PÁGINA */
/* Essencial para o menu não tapar o último conteúdo */
#appContent, .saved-section {
    padding-bottom: 100px !important;
}

/* 5. BOTÕES MELHORADOS (Sem afetar cores) */
.btn-primary, .btn-success {
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   CORREÇÃO ESPECÍFICA: MODAL EVOLUÇÃO
   ========================================== */

/* 1. Força o fundo branco no modal de evolução */
body.light-mode #modalEvolucao .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* 2. Corrige o seletor (Input) que estava cinza escuro */
body.light-mode #selectEvolucao {
    background-color: #f8fafc !important; /* Fundo clarinho */
    color: #1e293b !important;            /* Letra escura */
    border: 1px solid #cbd5e1 !important; /* Borda cinza */
}

/* 3. Ajusta o rótulo "Selecione o Exercício" */
body.light-mode #modalEvolucao label {
    color: #64748b !important; /* Cinza médio para leitura */
}

/* 4. Ajusta a mensagem "Selecione um exercício..." */
body.light-mode #msgEvolucao {
    color: #94a3b8 !important;
}

/* Escurece levemente o gráfico no modo claro para destacar */
body.light-mode #chartEvolucaoCanvas {
    filter: brightness(0.9) contrast(1.1);
}

/* ==========================================
   CORREÇÃO: BARRA DE RANKING (XP)
   ========================================== */

/* Estilo Base (Modo Escuro) - Garante que ela tenha forma */
.ranking-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 15px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* CORREÇÃO MODO CLARO (Fundo Branco + Contraste) */
body.light-mode .ranking-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* Corrige o texto Amarelo para Dourado Escuro no fundo branco */
/* Seleciona o span que tem cor amarela dentro do container */
body.light-mode .ranking-container span[style*="color:#facc15"] {
    color: #d97706 !important; /* Dourado escuro (Legível) */
}

/* Ajusta a cor da barra de progresso de fundo (o trilho cinza) */
body.light-mode .xp-bar-bg {
    background-color: #f1f5f9 !important; /* Cinza bem clarinho */
}

/* Ajusta o texto "Próx: Marombeiro" */
body.light-mode .ranking-container div[style*="color:#64748b"] {
    color: #94a3b8 !important;
}

/* ==========================================
   FIXAR MENU NO RODAPÉ (SEM VÃO)
   ========================================== */
.tabs {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Remove cantos arredondados */
    border-top-left-radius: 20px !important; /* Charme opcional nas pontas de cima */
    border-top-right-radius: 20px !important;
    border-bottom: none !important;
    z-index: 9999 !important;
    padding-bottom: max(15px, env(safe-area-inset-bottom)) !important; /* Ajuste para iPhones novos */
    background-color: var(--bg) !important; /* Garante que não fique transparente */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3) !important;
}

/* Garante espaço no final da página para o conteúdo não ficar escondido atrás do menu */
#appContent {
    padding-bottom: 120px !important;
}

/* Botão Minimizar Flutuante */
.btn-minimize-float {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.4); /* Fundo escuro transparente */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50; /* Garante que fique acima de TUDO (Fuel, Cards, etc) */
    line-height: 0;
    padding-bottom: 8px; /* Ajuste visual para o sublinhado _ ficar no meio */
    transition: background 0.2s;
}

.btn-minimize-float:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: white;
}

/* Estilo do Card "A Seguir" (Verde) */
.perf-next {
    border-color: #10b981; /* Borda Verde */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(0,0,0,0)); /* Degradê Verde */
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);
    margin-top: 15px;
}

/* Ajuste fino para o título do exercício não ficar gigante se o nome for longo */
.perf-valor-small {
    font-size: 1.3rem !important; /* Um pouco menor que o recorde */
    line-height: 1.2;
    margin: 8px 0 !important;
}

/* ==========================================
   CORREÇÃO: BOTÃO DE GÊNERO (HOMEM/MULHER)
   ========================================== */

/* Correção do Botão de Gênero (Homem/Mulher) */
button[onclick*="alternarGenero"] {
    color: var(--text-main) !important;       /* Branco no Dark, Preto no Light */
    background-color: var(--card-bg) !important; /* Fundo do cartão */
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Hover para ficar bonito */
button[onclick*="alternarGenero"]:hover {
    border-color: var(--highlight-border) !important;
    background-color: var(--highlight-bg) !important;
}

/* ==========================================
   ORGANIZAÇÃO DO FORMULÁRIO (ABA CORPO)
   ========================================== */

/* 1. Cria o Grid (2 Colunas lado a lado) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 15px; /* Espaço entre elas */
    margin-bottom: 15px;
    align-items: end; /* Alinha pela base */
}

/* 2. Estilo de cada Grupo (Label + Input) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 2px;
}

/* 3. Correção do Campo IDADE (Falso Input) */
/* Faz o texto parecer um input bloqueado para alinhar visualmente */
.input-fake {
    display: flex;
    align-items: center;
    height: 42px; /* Mesma altura dos inputs padrão */
    padding: 0 12px;
    background-color: rgba(0,0,0,0.2); /* Fundo mais escuro */
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.9rem;
}

/* Ajuste para inputs normais terem a mesma altura */
.login-input, select, .form-control {
    height: 42px !important;
}

/* --- ALINHAMENTO DO FORMULÁRIO CORPO --- */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Colunas iguais */
    gap: 15px;
    margin-bottom: 15px;
    align-items: end;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 2px;
}

/* Deixa a div da idade igualzinha a um input */
.input-fake {
    display: flex;
    align-items: center;
    height: 42px; /* Altura fixa igual dos inputs */
    padding: 0 12px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Força inputs normais a terem a mesma altura */
.profile-data input {
    height: 42px !important;
}

/* --- ESTILO DAS PASTAS DE TREINO --- */
.programa-container {
    margin-bottom: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    overflow: hidden;
}

.programa-header {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.programa-header:hover {
    background: var(--input-bg);
}

.programa-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--highlight);
    display: flex;
    align-items: center;
    gap: 8px;
}

.programa-body {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    background: var(--bg);
}

/* Classe para esconder o conteúdo quando fechado */
.programa-body.fechado {
    display: none;
}

.seta-pasta {
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.programa-body:not(.fechado) + .programa-header .seta-pasta {
    transform: rotate(180deg);
}

/* Adicione se não tiver */
#listaSelecaoBody {
    max-height: 60vh; /* Limita altura */
    overflow-y: auto; /* Cria barra de rolagem */
    background: var(--card-bg);
}

/* =========================================
   MAPA CORPORAL TURBINADO (Superiores/Inferiores)
   ========================================= */

/* Animação de Pulsar (Coração batendo) */
@keyframes pulsoMusculo {
    0% { opacity: 0.7; filter: brightness(1) drop-shadow(0 0 0px red); transform: scale(1); }
    50% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 5px red); transform: scale(1.02); }
    100% { opacity: 0.7; filter: brightness(1) drop-shadow(0 0 0px red); transform: scale(1); }
}

.musculo-ativo {
    animation: pulsoMusculo 2s infinite ease-in-out !important; /* O !important garante que funcione */
    stroke: #fff;
    stroke-width: 1px;
}

/* Layout dos Mapas */
.container-mapa-dividido {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.box-mapa {
    background: #1e293b; /* Fundo escuro */
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #334155;
    text-align: center;
    position: relative;
}

.titulo-mapa {
    color: #94a3b8;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
}

/* Deixa o SVG gigante ocupando o espaço */
.svg-corpo {
    width: 100%;
    height: 250px; /* Bem alto para ver os detalhes */
    display: block;
    margin: 0 auto;
}

/* Animação de Pulsar para os Músculos Ativos */
.musculo-ativo {
    animation: pulsoMusculo 2s infinite;
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.5)); /* Brilho vermelho */
}

@keyframes pulsoMusculo {
    0% { opacity: 0.8; }
    50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8)); }
    100% { opacity: 0.8; }
}

/* --- CORREÇÃO DO MAPA CORPORAL --- */
#bodySvgContainer {
    width: 100%;
    max-width: 350px; /* Limita a largura para não ficar gigante */
    margin: 0 auto;   /* Centraliza na tela */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#bodySvgContainer svg {
    max-height: 400px; /* Altura máxima do boneco */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* Sombra bonita */
}

.pulsar-musculo {
    animation: pulsoVermelho 2s infinite;
}

@keyframes pulsoVermelho {
    0% { fill-opacity: 0.8; }
    50% { fill-opacity: 1; filter: drop-shadow(0 0 5px #ef4444); }
    100% { fill-opacity: 0.8; }
}

/* --- MAPA CORPORAL E LESÕES --- */
#bodySvgContainer, #bodySvgLesoes {
    width: 100%;
    height: auto;
    min-height: 300px;
    display: flex;
    justify-content: center; /* Centraliza o boneco */
    align-items: center;
    position: relative;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4)); /* Sombra 3D */
}

#bodySvgContainer svg, #bodySvgLesoes svg {
    height: 100%;
    max-height: 400px; /* Impede que fique gigante em tablets */
    width: auto;
    overflow: visible;
}

/* Animação suave de cor */
path {
    transition: fill 0.3s ease, transform 0.2s ease;
}
path:hover {
    filter: brightness(1.2);
}

/* Modal de Lesão mais bonito */
#modalLesoes .modal-content {
    background: #1e293b; /* Fundo mais claro que o overlay */
    border: 1px solid #a855f7; /* Borda Roxa */
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}

.card {
    background: rgba(30, 41, 59, 0.7); /* Usando var(--card-bg) com opacidade */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.cardio-option {
    padding: 12px 20px;
    border-radius: 50px;
    border: none;
    background: var(--input-bg);
    color: white;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cardio-option:active {
    transform: scale(0.95);
    background: var(--grad-primary);
}

.tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95); /* Cor var(--bg) com transparência */
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    padding: 10px 5px;
    border-top: 1px solid var(--border);
    z-index: 1000;
    overflow-x: auto; /* Caso tenha muitas abas */
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 0.7rem; /* Texto menor para caber ícone em cima */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    min-width: 60px;
}

.tab-btn.active {
    color: #3b82f6;
    background: transparent;
    border-bottom: 2px solid #3b82f6;
}

.card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px; /* Bordas mais arredondadas ficam mais modernas */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.card:active {
    transform: scale(0.98); /* Feedback de clique */
}

h1, h2, h3, .ofensiva-container span {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body {
    font-family: 'Inter', sans-serif;
}

@keyframes pulsar-suave {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
.pulsar-suave { animation: pulsar-suave 2s infinite; }

/* Ajuste na macro-box-icon para não encavalar os ícones */
.macro-box-icon {
    background: rgba(255,255,255,0.03);
    padding: 10px 5px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Trava o tamanho dos campos para não tremer o layout */
#fatorAtividade, #objetivoMacro {
    width: 100% !important;
    height: 48px !important;
    padding: 0 10px !important;
    background-color: #1e293b; /* Cor escura do seu app */
    color: white;
    border: 1px solid #334155;
    border-radius: 10px;
    font-size: 16px; /* 16px evita o zoom automático em iPhones */
    appearance: none; /* Remove estilo nativo que causa bugs em alguns celulares */
}

/* Garante que o texto longo dentro do select não quebre as bordas */
select option {
    background: #0f172a;
    color: white;
}

/* Trava os campos para não tremer */
#fatorAtividade, #objetivoMacro {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    padding: 10px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Espaço fixo para o resultado */
#resultadoMacros {
    min-height: 250px;
}

/* Esconde o botão ou a aba de Opções de Dados */
[onclick*="mudarAba('dados')"], 
#abaDados, 
.menu-item-dados {
    display: none !important;
}

/* =========================================
   DASHBOARD DE DESCANSO (PREMIUM)
   ========================================= */
.rest-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
}

.rest-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 100px; /* Espaço para o botão flutuante */
}

/* CARD AZUL (Série Concluída) */
.rest-card-blue {
    background: rgba(30, 41, 59, 0.6); /* Base escura */
    border: 1px solid #3b82f6;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}
/* Efeito de brilho no fundo */
.rest-card-blue::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: var(--grad-primary);
}

/* CARD VERDE (Próxima Série) */
.rest-card-green {
    background: rgba(6, 78, 59, 0.4);
    border: 1px solid #10b981;
    border-radius: 16px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

/* CRONÔMETRO */
.rest-timer-display {
    font-family: 'Orbitron', monospace, sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

/* BOTÕES DE ESFORÇO (RPE) */
.rpe-grid { display: flex; gap: 8px; margin-top: 10px; }
.btn-rpe {
    flex: 1; padding: 10px; border-radius: 8px; border: 1px solid transparent;
    background: rgba(255,255,255,0.05); color: var(--text-muted);
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
    opacity: 0.7;
}
.btn-rpe:active { transform: scale(0.95); }
.btn-rpe.selected { opacity: 1; transform: scale(1.05); font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.5); }

.rpe-facil.selected { background: rgba(34, 197, 94, 0.2); border-color: #22c55e; color: #4ade80; }
.rpe-bom.selected { background: rgba(234, 179, 8, 0.2); border-color: #eab308; color: #facc15; }
.rpe-pesado.selected { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #f87171; }

/* HISTÓRICO LIMPO */
.hist-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
}

/* BOTÃO FLUTUANTE (Rodapé) */
.rest-footer {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: linear-gradient(0deg, var(--bg) 80%, transparent 100%);
    text-align: center;
}
.btn-proxima {
    width: 100%; padding: 16px;
    background: var(--grad-gold); /* Usa o gradiente dourado do seu CSS */
    color: #0f172a; border: none; border-radius: 16px;
    font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
    cursor: pointer;
}

/* --- LAYOUT SLIM DAS SÉRIES (Celular) --- */
.serie-row-slim {
    display: grid;
    grid-template-columns: 25px 1fr 1fr 35px; /* Grid fixo: Número | Carga | Reps | Check */
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

/* Inputs Grandes e Limpos */
.input-slim {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem; /* Fonte grande para toque */
    appearance: none;
}
.input-slim:focus { border-color: #3b82f6; outline: none; }

/* Rótulos pequenos dentro do input */
.input-label-float {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    font-size: 0.6rem; color: var(--text-muted); pointer-events: none;
}

/* =========================================
   HARMONIA VISUAL PREMIUM (ADICIONAR AO FINAL)
   ========================================= */

/* --- Cabeçalho e Rodapé Efeito Vidro --- */
.glass-header-premium {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15, 23, 42, 0.85); /* Azul escuro translúcido */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2); /* Borda azul neon sutil */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass-footer-premium {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(0deg, rgba(2, 6, 23, 1) 50%, rgba(2, 6, 23, 0) 100%);
    z-index: 50;
    pointer-events: none; /* Para não bloquear cliques atrás, o botão dentro terá pointer-events: auto */
}

/* --- Botões de Ação Neon --- */
.btn-neon {
    border: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px;
}
.btn-neon:active { transform: scale(0.97); }

.btn-neon.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.btn-neon.red { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.btn-neon.green-finish {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    width: 100%; font-size: 1.1rem; padding: 16px;
}

/* --- Linha de Série Slim com Botões --- */
.serie-row-harmony {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    background: rgba(255,255,255,0.02); /* Leve destaque no fundo */
    border-radius: 8px;
    margin-bottom: 5px;
}

/* Grupo de Input com Botões Laterais */
.input-group-harmony {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #0f172a; /* Fundo escuro para o grupo */
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #334155;
}

.btn-adjust {
    width: 24px; height: 36px;
    border: none; border-radius: 6px;
    font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.btn-adjust.minus { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.btn-adjust.plus { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

.input-harmony {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0;
}
.input-harmony:focus { outline: none; }

/* --- Ajustes Gerais de Modal --- */
#modalListaExercicios {
    padding-top: 20px;
    padding-bottom: 120px; /* Espaço extra para o rodapé fixo não cobrir o último exercício */
}
.card-exercicio-premium {
    background: #1e293b;
    border-radius: 16px;
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* =========================================
   CORREÇÃO DO FOCO E BOTÃO ADICIONAR
   ========================================= */

/* --- 1. ESTILO DO MODO FOCO --- */
/* Quando o body tiver a classe .modo-foco: */
body.modo-foco .navbar, 
body.modo-foco .app-header, 
body.modo-foco .container-lista,
body.modo-foco #miniDescanso {
    display: none !important; /* Esconde tudo que não é o treino */
}

body.modo-foco {
    background-color: #000 !important; /* Fundo preto total */
    overflow: hidden; /* Trava rolagem externa */
}

body.modo-foco #modalTreino {
    background: #000; /* Garante que o modal fique imersivo */
    z-index: 9999;
}

/* --- 2. BOTÃO "+ ADICIONAR SÉRIE" (ESTILO NEON) --- */
.btn-add-serie-neon {
    width: 100%;
    padding: 14px;
    margin-top: 15px;
    background: rgba(15, 23, 42, 0.6); /* Fundo escuro */
    border: 1px solid rgba(56, 189, 248, 0.3); /* Borda Azul Neon Sutil */
    color: #38bdf8;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-serie-neon:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
    transform: translateY(-2px);
}

.btn-add-serie-neon:active {
    transform: scale(0.98);
}

/* =========================================
   MODO FOCO (BLACKOUT TOTAL / IMERSIVO)
   ========================================= */

/* 1. O Corpo da página fica preto e sem rolagem */
body.modo-foco {
    background-color: #000000 !important;
    overflow: hidden !important; /* Trava a rolagem da página de trás */
}

/* 2. Esconde TUDO que não seja o Modal de Treino */
body.modo-foco > *:not(#modalTreino) {
    display: none !important;
}

/* 3. O Modal vira uma tela cheia preta sólida */
body.modo-foco #modalTreino {
    display: flex !important;
    position: fixed !important;
    top: 0; 
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important;
    z-index: 99999 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.modo-foco .modal-content {
    background: #000000 !important;
    width: 100% !important;
    max-width: none !important; /* Remove limite de largura */
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 4. Remove o efeito de vidro (Glass) e deixa preto sólido */
body.modo-foco .glass-header-premium,
body.modo-foco .glass-footer-premium {
    background: #000000 !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #333 !important; /* Uma linha sutil para separar */
    box-shadow: none !important;
    position: fixed !important; /* Garante que fiquem fixos */
    left: 0;
    width: 100%;
}

/* Ajuste para o conteúdo não ficar escondido atrás do header fixo */
body.modo-foco #modalListaExercicios {
    padding-top: 140px !important; /* Mais espaço no topo */
    padding-bottom: 100px !important;
    background: #000000 !important;
}

/* 5. Destaca os Cards dos Exercícios no fundo preto */
body.modo-foco .card-exercicio-premium {
    background: #0f0f0f !important; /* Um cinza quase preto */
    border: 1px solid #333 !important;
    box-shadow: 0 0 20px rgba(0,0,0,1) !important;
}

/* Esconde qualquer barra de rolagem feia */
body.modo-foco ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* =========================================
   MODO FOCO: EFEITO HOLOFOTE (SPOTLIGHT)
   ========================================= */

/* 1. Estado Padrão no Modo Foco: TUDO APAGADO */
body.modo-foco .card-exercicio-premium {
    opacity: 0.15;                  /* Bem transparente */
    filter: grayscale(100%) blur(1px); /* Preto e branco e levemente borrado */
    transform: scale(0.98);         /* Levemente menor */
    transition: all 0.4s ease;      /* Animação suave */
    border-color: #333;
    cursor: pointer;
}

/* 2. Estado FOCADO: ACESO E BRILHANTE */
body.modo-foco .card-exercicio-premium.focado {
    opacity: 1;                     /* Totalmente visível */
    filter: none;                   /* Cores normais */
    transform: scale(1);            /* Tamanho normal */
    border: 1px solid #38bdf8;      /* Borda Azul Neon */
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.2); /* Brilho ao redor */
    z-index: 10;                    /* Fica por cima dos outros */
    background: #0f172a;            /* Garante fundo sólido */
}

/* Pequeno feedback ao passar o mouse nos apagados */
body.modo-foco .card-exercicio-premium:hover {
    opacity: 0.4;
}

/* =========================================
   CORREÇÃO VISUAL: LISTA DE EXERCÍCIOS (PREENCHER TELA)
   ========================================= */

/* Faz a lista de exercícios crescer para ocupar todo o espaço */
#modalListaExercicios {
    flex: 1;                 /* Cresce para ocupar o espaço */
    min-height: 100%;        /* Garante altura total */
    display: flex;
    flex-direction: column;
    /* Se quiser remover o cinza cortado e deixar transparente (cor do fundo do modal): */
    background: transparent !important; 
}

/* Se você estiver falando da lista de 'Preview' (antes de abrir o treino) */
.lista-preview {
    min-height: 150px;       /* Altura mínima para não ficar fina demais */
    height: 100%;            /* Tenta ocupar o pai */
    display: flex;
    flex-direction: column;
}

/* Garante que o container do modal também estique */
#modalTreino .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;            /* Ocupa a tela toda */
    max-height: 100vh;
}

/* =========================================
   CORREÇÃO: LISTA PREVIEW EXPANDIDA (TELA INICIAL)
   ========================================= */

/* 1. Garante que o Card seja flexível na vertical */
.card-treino {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Ocupa toda altura da linha do Grid */
}

/* 2. Faz a lista cinza crescer para preencher o vazio */
.lista-preview {
    flex-grow: 1 !important;  /* O PULO DO GATO: Cresce para ocupar o espaço sobrando */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; /* Evita bugs de scroll */
}

/* (Opcional) Se quiser que o botão 'Começar' fique sempre no rodapé do card */
.card-treino button {
    margin-top: auto !important;
}

/* ============================================================
   CORREÇÃO UNIVERSAL DE TEMAS (A CHAVE MESTRA)
   Força todos os cards a obedecerem as variáveis do Tema JS
   ============================================================ */

/* 1. CARDS, MODAIS E SEÇÕES (Fundo do Card) */
.card-treino,
.card-cardio,
.status-section,    /* Ofensiva */
.xp-container,      /* RPG */
.agenda-container,  /* Agenda */
.historico-card,    /* Histórico */
.nutricao-card,     /* Nutrição */
.dieta-card,        /* Dieta */
.card-generico,
.modal-content,     /* Fundo dos Modais */
.lista-preview,     /* Lista dentro do card */
.lista-preview li,
.form-group input,
.form-group select,
.form-group textarea {
    /* O SEGREDO: Usa a variável que o JS troca! */
    background-color: var(--card-bg) !important; 
    
    /* Remove imagens de fundo ou gradientes antigos */
    background-image: none !important;
    
    /* Ajusta bordas e textos para o tema */
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 2. BOTÃO + CRIAR (Usa a cor de destaque forte do tema) */
#btnAdicionarTreino, 
.btn-criar-flutuante {
    background: var(--box-bg) !important; /* Azul Forte / Rosa Forte / etc */
    color: #ffffff !important;            /* Texto sempre branco no botão */
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* 3. ÍCONES E TEXTOS SECUNDÁRIOS */
h2, h3, h4, strong, span, .cal-day-name {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

small, .text-muted, .obs-text {
    color: var(--text-muted) !important;
}

/* 4. CALENDÁRIO / AGENDA */
.calendar-grid {
    background: transparent !important;
}
.cal-day {
    background: transparent !important;
    color: var(--text-main) !important;
}
.cal-day.active {
    background: var(--box-bg) !important; /* Cor forte do tema */
    color: white !important;
}

/* 5. INPUTS (Correção interna) */
input, select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
}

/* 6. CORREÇÃO ESPECÍFICA PARA BARRA DE XP (RPG) */
.xp-bar-bg {
    background: var(--border) !important; /* Fundo da barra suave */
}
.xp-bar-fill {
    background: var(--grad-primary) !important; /* Gradiente do tema */
}
.level-badge {
    background: var(--box-bg) !important;
    color: white !important;
}

/* ============================================================
   CORREÇÃO FINAL DE TEMAS - FORÇAR USO DAS VARIÁVEIS
   ============================================================ */

/* 1. FORÇA TODOS OS CARDS E SEÇÕES A USAREM A COR DO TEMA */
.card-treino,
.card-cardio,
.status-section,      /* Onde fica a Ofensiva */
.xp-container,        /* Onde fica o Nível RPG */
.agenda-container,    /* Agenda Completa */
.historico-card,      /* Histórico Corpo */
.nutricao-card,       /* Nutrição */
.dieta-card,          /* Dieta */
.card-generico,       /* Outros cards */
.modal-content,       /* Fundo dos Modais */
.lista-preview,       /* Lista dentro do card */
.lista-preview li,    /* Itens da lista */
.resumo-card,         /* Cards de resumo */
.meta-box             /* Caixas de meta */
{
    /* O SEGREDO: !important força a usar a variável do JS */
    background-color: var(--card-bg) !important; 
    
    /* Remove transparências escuras antigas (o cinza vem daqui muitas vezes) */
    background-image: none !important;
    background: var(--card-bg) !important; 
    
    /* Ajusta bordas e textos */
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 2. CORREÇÃO ESPECÍFICA PARA A AGENDA (CALENDÁRIO) */
.calendar-grid, .calendar-header {
    background: transparent !important; /* Remove fundo cinza do grid */
}
.cal-day {
    background: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid transparent;
}
.cal-day:hover {
    border-color: var(--highlight-border) !important;
}
/* Dia atual/ativo deve ter a cor de destaque do tema */
.cal-day.active {
    background: var(--highlight-border) !important; 
    color: #ffffff !important;
}

/* 3. BARRA DE XP (RPG) - Para não ficar cinza escuro */
.xp-bar-bg {
    background-color: var(--border) !important; /* Usa a cor da borda (suave) */
}
.xp-info {
    color: var(--text-muted) !important;
}

/* 4. BOTÃO + CRIAR (FLUTUANTE) */
#btnAdicionarTreino, 
.btn-criar-flutuante {
    /* Usa a cor forte do tema (definida no seu JS como --highlight-border ou --box-bg) */
    background: var(--highlight-border) !important; 
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* 5. INPUTS E SELETORES (Para tirar o fundo escuro) */
input, select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* 6. ÍCONES E TEXTOS */
h2, h3, h4, strong, span {
    color: var(--text-main) !important;
}
small, .text-muted, p {
    color: var(--text-muted) !important;
}

/* 7. CHECKBOXES */
input[type="checkbox"] {
    accent-color: var(--highlight-border) !important;
}

/* ============================================================
   CORREÇÃO DE TEMAS (FORÇAR FUNDO BRANCO/ROSA)
   ============================================================ */

/* Força TODOS esses elementos a pegarem a cor do tema (var(--card-bg)) */
body.tema-claro .card-treino,      body.tema-rosa .card-treino,
body.tema-claro .card-cardio,      body.tema-rosa .card-cardio,
body.tema-claro .status-section,   body.tema-rosa .status-section,
body.tema-claro .xp-container,     body.tema-rosa .xp-container,
body.tema-claro .agenda-container, body.tema-rosa .agenda-container,
body.tema-claro .historico-card,   body.tema-rosa .historico-card,
body.tema-claro .nutricao-card,    body.tema-rosa .nutricao-card,
body.tema-claro .lista-preview,    body.tema-rosa .lista-preview,
body.tema-claro .modal-content,    body.tema-rosa .modal-content {
    background-color: var(--card-bg) !important; 
    background-image: none !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: none !important; /* Remove sombras escuras */
}

/* Remove fundo cinza da lista dentro do card */
body.tema-claro .lista-preview li, 
body.tema-rosa .lista-preview li {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

/* Força texto escuro/vinho nos títulos */
body.tema-claro h3, body.tema-rosa h3,
body.tema-claro h4, body.tema-rosa h4,
body.tema-claro strong, body.tema-rosa strong {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* =========================================
   REGRAS DE TEMA FORÇADAS (CSS FINAL)
   ========================================= */

/* Classe para o Box de Ofensiva (que limpamos via JS) */
.box-ofensiva-theme {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* Força TODOS os cards a usarem a variável do tema */
.card, .card-treino, .card-cardio, .modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* Inputs limpos */
input, select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* Ícones e Textos dentro de cards */
.card h3, .card span, .card p {
    /* Garante que o texto tenha contraste com o fundo */
    color: var(--text-main);
}
.card .text-muted {
    color: var(--text-muted) !important;
}

/* Correção para o botão +CRIAR */
.btn-criar-flutuante, #btnAdicionarTreino {
    background-color: var(--box-bg) !important; /* Cor forte do tema */
    color: #fff !important;
}

/* Garante que elementos limpos peguem a cor do tema */
.bg-tema-corrigido {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* =======================================================
   CORREÇÃO FINAL DE TEMAS - FORÇA BRUTA EM IDS ESPECÍFICOS
   ======================================================= */

/* 1. Lista de TODOS os elementos que costumam travar no cinza */
#boxOfensiva,                  /* Cabeçalho */
#modalHIIT .modal-content,     /* Tela do HIIT */
#modalVitoriaXP .victory-card, /* Tela de Vitória */
#cardParaInstagram,            /* Resumo do Instagram */
#previewContainer,             /* Prova Real */
#modalPdfViewer .modal-body,   /* Leitor de PDF */
#txtImportacao,                /* Área de Texto */
#txtDietaImport,               /* Área de Texto */
.macro-box-icon                /* Ícones da Dieta */
{
    /* Força o fundo a ser a cor do card do tema (Branco/Rosa) */
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    background-image: none !important; /* Remove gradientes */
    
    /* Força a cor do texto e bordas */
    color: var(--text-main) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

/* 2. Garante que os textos dentro desses cards fiquem visíveis */
/* (Caso contrário, texto branco no fundo branco some) */
#modalHIIT h2, #modalHIIT div, #modalHIIT label,
#cardParaInstagram h1, #cardParaInstagram div, #cardParaInstagram span,
#modalVitoriaXP h2, #modalVitoriaXP div, #modalVitoriaXP label {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* 3. Ajuste específico para o Card do Instagram ficar bonito no tema claro */
#cardParaInstagram {
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* 4. Ajuste para o Timer do HIIT ficar visível */
#hiitTimer {
    color: var(--highlight-border) !important; /* Azul ou Rosa forte */
}

/* 5. Inputs que estavam escuros */
#inputNomePasta, #quickCarga, #quickSeries, #quickReps {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* =======================================================
   RETA FINAL: CORREÇÃO COACH, CARDIO, AGENDA E LISTAS
   ======================================================= */

/* 1. COACH VIRTUAL (Robozinho) */
#coachContainer {
    /* Força a cor do card (Branco/Rosa) em vez da cor de destaque */
    background: var(--card-bg) !important; 
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
/* Garante que o texto do coach apareça */
#coachContainer h3, #coachContainer p {
    color: var(--text-main) !important;
}

/* 2. CARD DE CARDIO E AGENDA (Usam a classe genérica .card) */
/* Isso pega o container do Cardio, da Agenda, e qualquer outro .card solto */
.card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 3. AGENDA (CALENDÁRIO INTERNO) */
.calendar-grid {
    background: transparent !important; /* Remove fundo cinza atrás dos dias */
}
.cal-day-name {
    color: var(--text-muted) !important;
}
.cal-day {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid transparent !important;
}
/* Dia selecionado/hoje mantém o destaque */
.cal-day.active {
    background-color: var(--highlight-border) !important;
    color: #fff !important;
}

/* 4. MINI CARDS DENTRO DOS TREINOS (Lista de Exercícios) */
/* Pega os itens da lista (li) dentro da prévia do treino */
.lista-preview li, 
#containerTreinos .lista-preview li {
    /* Usa a cor de Input (ex: cinza bem clarinho ou rosa bebê) para destacar do fundo branco */
    background-color: var(--input-bg) !important; 
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

/* Garante que o texto dentro do mini card não fique branco-no-branco */
.lista-preview li strong, 
.lista-preview li span,
.lista-preview li div {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* 5. BOTÕES DE CARDIO (Futebol, Vôlei, etc) */
/* Eles já têm cores próprias, mas vamos garantir que a borda/texto fiquem legíveis */
.btn-cardio {
    border: 1px solid rgba(0,0,0,0.1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* ============================================================
   CORREÇÃO FINAL: CARDIO, AGENDA E MINI-CARDS
   ============================================================ */

/* 1. CORRIGE CARDIO E AGENDA (Que estão dentro da aba Treinos) */
/* Como eles não têm ID, pegamos todos os cards dentro da aba */
#tab-treinos .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 2. MINI CARDS / BADGES DENTRO DOS TREINOS */
/* Esses são aqueles quadradinhos com "3 exercícios", "20 min", etc */
#containerTreinos div[style*="background:#1e293b"],
#containerTreinos div[style*="background: #1e293b"] {
    background-color: var(--input-bg) !important; /* Cor suave do tema */
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
}

/* 3. TÍTULOS E TEXTOS DENTRO DELES */
#tab-treinos .card h3, 
#tab-treinos .card p {
    color: var(--text-main) !important;
}

/* 4. CALENDÁRIO DA AGENDA */
.calendar-grid {
    background: transparent !important;
}
.cal-day {
    color: var(--text-main) !important;
}

/* Classe auxiliar para os badges que o JS limpou */
.badge-tema-corrigido {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

/* =======================================================
   CORREÇÃO DEFINITIVA DE FUNDOS (CAÇADOR DE CINZA)
   ======================================================= */

/* 1. CARDIO E AGENDA (Força bruta nos cards da aba de treinos) */
#tab-treinos .card,
#tab-nutricao .card,
#tab-peso .card {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 2. MINI-CARDS (Aquelas barrinhas de info dentro dos treinos) */
/* O código abaixo diz: "Se tiver uma div com fundo cinza escuro (#1e293b), mude para a cor suave do tema" */
/* O :not(.menu-flutuante) é essencial: este seletor casa com QUALQUER div que
   mencione #1e293b no atributo style — inclusive quem usa a cor só na BORDA.
   Era o que roubava o fundo dos menus suspensos e deixava o texto ilegível. */
/* .painel-solido é a saída para painéis que precisam de fundo opaco próprio.
   Sem ela, um modal que use #1e293b só na borda recebia --input-bg, que nos
   temas é semitransparente (rgba(...,0.5) no escuro, 0.1 no rosa) — e o painel
   ficava vazado, deixando a tela de trás aparecer. */
div[style*="#1e293b"]:not(.menu-flutuante):not(.painel-solido),
div[style*="rgb(30, 41, 59)"]:not(.menu-flutuante):not(.painel-solido),
div[style*="#1E293B"]:not(.menu-flutuante):not(.painel-solido) {
    background-color: var(--input-bg) !important;
    background: var(--input-bg) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
}

/* 3. AGENDA (CALENDÁRIO) */
/* Remove qualquer fundo cinza dos dias ou do grid */
.calendar-grid, .cal-day {
    background: transparent !important;
    background-color: transparent !important;
}
.cal-day.active {
    background-color: var(--highlight-border) !important;
    color: #fff !important;
}

/* 4. BOTÕES DE AÇÃO E INPUTS (Que podem estar cinzas) */
input, select, textarea {
    background-color: var(--input-bg) !important;
}
.btn-cardio {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 5. SELEÇÃO GERAL DE TEXTOS */
/* Garante que se o fundo ficou branco, o texto não suma (fique escuro/rosa) */
.card h3, .card h4, .card span, .card strong, .card p {
    color: var(--text-main); /* Sem !important para permitir variações, mas força o padrão */
}
.card .text-muted {
    color: var(--text-muted) !important;
}

/* =======================================================
   RETA FINAL: DESAFIO E MINI-BADGES
   ======================================================= */

/* 1. CARD DESAFIO DA SEMANA */
/* Remove o gradiente roxo fixo e usa a cor de destaque do tema (Azul Claro / Rosa Claro) */
#cardDesafioSemanal {
    background: var(--highlight-bg) !important; /* Fundo suave */
    border: 1px solid var(--highlight-border) !important; /* Borda colorida */
    color: var(--text-main) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* Título e Texto do Desafio */
#tituloDesafio, #descDesafio, #cardDesafioSemanal h3, #cardDesafioSemanal p {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* 2. MINI-BADGES DENTRO DAS LISTAS */
/* Caça as divs que têm a cor #1e293b (Cinza Escuro) chumbada */
div[style*="background:#1e293b"], 
div[style*="background: #1e293b"],
div[style*="background: rgb(30, 41, 59)"] {
    
    /* Troca para a cor de Input do tema (Cinza Clarissímo ou Rosa Bebê) */
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    
    /* Ajusta texto e borda */
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    
    /* Garante que o texto dentro não fique ilegível */
    text-shadow: none !important;
}

/* 3. ÍCONES DENTRO DOS MINI-BADGES */
div[style*="background:#1e293b"] span,
div[style*="background: #1e293b"] span {
    color: var(--text-muted) !important;
}

/* =======================================================
   CORREÇÃO FINAL: MINI-CARDS DE EXERCÍCIOS
   (Força as barrinhas cinzas a ficarem da cor do tema)
   ======================================================= */

/* 1. Ataca diretamente as DIVs e LIs com fundo cinza chumbado */
#containerTreinos div[style*="#1e293b"],
#containerTreinos div[style*="rgb(30, 41, 59)"],
#containerTreinos li[style*="#1e293b"],
#containerTreinos li[style*="background: #1e293b"] {
    
    /* Troca o cinza escuro pela cor de input do tema (suave) */
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    
    /* Ajusta borda e texto */
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    
    /* Remove sombras escuras se houver */
    box-shadow: none !important;
}

/* 2. Garante que os ícones e textos dentro dessas barrinhas fiquem visíveis */
#containerTreinos div[style*="#1e293b"] *,
#containerTreinos li[style*="#1e293b"] * {
    color: var(--text-muted) !important;
    text-shadow: none !important;
}

/* 3. Caso especial para badges de "x séries" ou "x min" */
.badge-exercicio, 
.badge-info {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

.mini-card-limpo {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* Cabeçalho da Lista de Exercícios (Carga | Reps) */
/* Ele não tem classe, mas tem esse estilo sticky */
div[style*="position:sticky"],
div[style*="position: sticky"] {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* Badges quadradinhos (Reps/Carga) */
/* Ataca pela estrutura: div dentro de um flex row na lista */
.lista-preview div > div[style*="border-radius"] {
    background-color: var(--input-bg) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* =======================================================
   CORREÇÃO FINAL: ITENS DENTRO DAS LISTAS
   ======================================================= */

/* 1. Cabeçalhos de Grupo (PEITO, COSTAS) - Identificados por serem sticky */
div[style*="position:sticky"],
div[style*="position: sticky"] {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* 2. Badges de Numeração (1, 2, 3) - Identificados pelo tamanho fixo */
div[style*="min-width:28px"],
div[style*="min-width: 28px"] {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* 3. Badges Genéricos Cinzas dentro das listas */
.lista-preview div[style*="#1e293b"],
.lista-preview div[style*="rgb(30, 41, 59)"] {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* Garante que os cards dentro da pasta obedeçam o tema */
.programa-container > div:nth-child(2) > div {
    background: var(--input-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* Nome do treino dentro do card */
.programa-container > div:nth-child(2) > div > div:nth-child(2) {
    color: var(--text-main) !important;
}

/* Qtd de exercícios */
.programa-container > div:nth-child(2) > div > div:nth-child(3) {
    color: var(--text-muted) !important;
}

/* =======================================================
   FASE FINAL: EXECUÇÃO, PREVIEW E CRONÔMETRO
   ======================================================= */

/* 1. MODAL DE PRÉVIA (Lista de exercícios antes de começar) */
#modalPreview .modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
/* Itens da lista dentro do modal (estavam com fundo cinza) */
#previewBody div[style*="background"] {
    background: var(--input-bg) !important; /* Fundo suave */
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* 2. TELA DE EXECUÇÃO (OS CARDS DO TREINO) */
/* Remove o gradiente escuro dos cards de exercício */
#containerExecucao div[style*="linear-gradient"] {
    background: var(--card-bg) !important;
    background-image: none !important; /* Mata o gradiente preto */
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

/* Destaque para o exercício ATUAL (O que está valendo) */
/* Usamos uma borda grossa colorida para saber qual é, já que tiramos o fundo escuro */
#containerExecucao div[style*="border: 1px solid #10b981"] {
    background: var(--highlight-bg) !important; /* Fundo levemente colorido */
    border: 2px solid var(--status-green) !important;
}

/* 3. CRONÔMETRO E TEXTOS (Que estavam brancos) */
/* Força os números do timer a serem da cor do texto (Preto no Claro / Branco no Escuro) */
#tempoDecorrido, 
#cronometroDisplay, 
#timerDisplay,
div[style*="font-size:3rem"], /* O número grande do timer */
div[style*="font-size: 4rem"] {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* Ícones de Play/Pause e botões de controle */
#containerExecucao button {
    border: 1px solid var(--border) !important;
}

/* =======================================================
   CORREÇÃO FINAL: BOTÕES DO CRONÔMETRO (-10s / +30s)
   ======================================================= */

/* Força os botões a usarem a mesma cor do texto principal */
#containerExecucao button,
.timer-controls button {
    color: var(--text-main) !important;       /* Cor igual ao número do timer */
    border: 1px solid var(--border) !important; /* Borda visível */
    background: var(--card-bg) !important;      /* Fundo do card (limpo) */
    font-weight: bold !important;
    box-shadow: none !important;
}

/* Garante que o ícone de Play/Pause também siga a cor */
#btnPlayPause {
    color: var(--text-main) !important;
    border-color: var(--text-main) !important;
}

/* =======================================================
   CORREÇÃO FINAL: BOTÕES DE TEMPO (-10s / +30s)
   ======================================================= */

/* Ataca todos os botões dentro da área de execução (exceto o de finalizar) */
#containerExecucao button {
    /* Força cor escura/forte para leitura no tema claro */
    color: var(--text-main) !important; 
    font-weight: 800 !important;
    
    /* Fundo limpo para garantir contraste */
    background-color: var(--card-bg) !important; 
    background: var(--card-bg) !important;
    
    /* Borda visível para destacar o botão */
    border: 2px solid var(--border) !important;
    
    /* Remove qualquer opacidade ou sombra cinza antiga */
    opacity: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* DESTAQUE EXTRA: Ao passar o mouse ou clicar */
#containerExecucao button:active {
    background-color: var(--input-bg) !important;
    transform: scale(0.95);
}

/* GARANTIA PARA O CRONÔMETRO (Caso ainda esteja branco) */
#tempoDecorrido, #cronometroDisplay {
    color: var(--text-main) !important; /* Vira preto no tema claro */
    text-shadow: none !important;
}

/* =======================================================
   CORREÇÃO DEFINITIVA: BOTÕES DE ALTERAR TEMPO
   ======================================================= */

/* Seleciona botões pelo atributo onclick (Infalível!) */
button[onclick*="alterarTempo"] {
    color: var(--text-main) !important;       /* Preto no Claro, Branco no Escuro */
    background: var(--card-bg) !important;    /* Fundo limpo */
    border: 2px solid var(--border) !important; /* Borda visível */
    font-weight: 800 !important;
    opacity: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Efeito ao clicar */
button[onclick*="alterarTempo"]:active {
    background: var(--input-bg) !important;
    transform: scale(0.95);
}

/* =======================================================
   RETA FINAL: TELA DE EXECUÇÃO (TREINO EM ANDAMENTO)
   ======================================================= */

/* 1. TODOS OS CARDS DE EXECUÇÃO (Limpeza Geral) */
#containerExecucao > div {
    /* Remove o gradiente escuro e sombras neon */
    background: var(--card-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    
    /* Cores padrão do tema */
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    opacity: 0.6; /* Deixa os inativos um pouco apagados para focar no atual */
    transition: all 0.3s ease;
}

/* 2. CARD ATIVO (O EXERCÍCIO ATUAL) - Destaque! */
/* O JS marca o ativo com borda verde (#10b981). Usamos isso para detectar. */
#containerExecucao > div[style*="#10b981"],
#containerExecucao > div[style*="rgb(16, 185, 129)"] {
    
    /* Fundo de destaque suave (Azul Bebê ou Rosa Bebê) */
    background-color: var(--highlight-bg) !important; 
    
    /* Borda Verde para indicar "É AGORA" */
    border: 2px solid #10b981 !important; 
    
    /* Traz opacidade total e sombra leve */
    opacity: 1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transform: scale(1.02); /* Leve aumento para destaque */
}

/* 3. CORREÇÃO DE TEXTOS DENTRO DOS CARDS */
/* Garante que o nome do exercício e as cargas fiquem visíveis */
#containerExecucao > div h3,
#containerExecucao > div span,
#containerExecucao > div div {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* 4. ÍCONES (Halteres, etc) */
/* Se estiverem brancos, força a cor do tema */
#containerExecucao .emoji-icon {
    filter: none !important; /* Remove sombras projetadas */
}

/* =======================================================
   RETA FINAL: EXECUÇÃO, PRÉVIA E CRONÓMETRO (CORRIGIDO)
   ======================================================= */

/* 1. ECRÃ DE EXECUÇÃO (Treino em Andamento) */
.card-exercicio-premium, 
.glass-header-premium {
    /* Remove gradientes e fundos escuros */
    background: var(--card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* 2. CRONÓMETRO E TÍTULOS (Que estavam brancos/invisíveis) */
#cronometroGlobal,
#modalTituloPremium,
.timer-glow,
.card-exercicio-premium h3,
.card-exercicio-premium span {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* 3. MODAL DE PRÉVIA (Lista antes de começar) */
/* O container da lista */
#previewBody, #modalPreview .modal-content {
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
}
/* Os itens da lista (exercícios) que estavam transparentes/cinzentos */
#previewBody div[style*="background"] {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

/* 4. BOTÕES DE TEMPO E AÇÕES */
.glass-header-premium button,
#containerExecucao button {
    background: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    text-shadow: none !important;
}

/* =======================================================
   RETA FINAL: INPUTS E BOTÃO ADICIONAR (CORREÇÃO)
   ======================================================= */

/* 1. CAMPOS DE CARGA E REPETIÇÕES (Inputs Harmony) */
.input-harmony, 
.serie-input {
    /* Troca o fundo escuro pelo fundo suave do tema */
    background-color: var(--input-bg) !important; 
    background: var(--input-bg) !important;
    
    /* Troca texto branco por texto escuro/vinho */
    color: var(--text-main) !important;
    
    /* Ajusta a borda para ficar sutil */
    border: 1px solid var(--border) !important;
}

/* Garante que o texto dentro do input não fique invisível ao digitar */
.input-harmony::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* 2. BOTÃO "+ ADICIONAR SÉRIE" (Neon) */
.btn-add-serie-neon {
    /* Remove o cinza escuro e deixa limpo */
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
    
    /* Usa a cor de destaque do tema (Azul ou Rosa) para o texto e borda */
    color: var(--highlight-border) !important;
    border: 1px dashed var(--highlight-border) !important;
    
    /* Remove sombras pesadas "neon" que ficam feias no claro */
    box-shadow: none !important;
    text-shadow: none !important;
    
    /* Deixa o botão mais elegante */
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* Efeito ao passar o mouse ou clicar no botão adicionar */
.btn-add-serie-neon:hover,
.btn-add-serie-neon:active {
    background-color: var(--highlight-bg) !important; /* Fundo levemente colorido */
    transform: scale(0.98);
}

/* 3. BOTÕES DE MENOS E MAIS (-5 / +5) AO LADO DOS INPUTS */
.btn-adjust, .btn-minus, .btn-plus {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* =======================================================
   RETA FINAL: LIMPEZA DAS BORDAS (ESTILO SOFT)
   ======================================================= */

/* Remove bordas duras dos inputs e botões de +/- */
.input-harmony, 
.serie-input, 
.btn-adjust, 
.btn-minus, 
.btn-plus {
    /* Remove a linha de contorno feia */
    border: 1px solid transparent !important; 
    
    /* Garante que fiquem bem arredondados */
    border-radius: 8px !important;
    
    /* Remove sombras antigas */
    box-shadow: none !important;
    
    /* Garante que o fundo seja o suave do tema */
    background-color: var(--input-bg) !important;
}

/* Quando clicar no campo, cria um anel suave da cor do tema */
.input-harmony:focus, 
.serie-input:focus {
    outline: none !important;
    border-color: var(--highlight-border) !important;
    box-shadow: 0 0 0 2px var(--highlight-bg) !important;
}

/* Ajuste fino para os botões -5 e +5 ficarem alinhados e limpos */
.btn-adjust, .btn-minus, .btn-plus {
    font-weight: bold !important;
    color: var(--text-muted) !important;
    /* Removemos a borda, então usamos a cor do texto para destacar */
}

/* =======================================================
   RETA FINAL: REMOVER BORDA DO GRUPO (CONTAINER)
   ======================================================= */

/* 1. O Container que segura tudo (-5, Input, +5) */
/* É ele que está a criar essa borda escura em volta */
.input-group-harmony {
    border: none !important;            /* Remove a borda externa */
    background: transparent !important; /* Fundo transparente */
    box-shadow: none !important;        /* Remove qualquer sombra */
    outline: none !important;
}

/* 2. Reforço para os itens dentro ficarem com a cor certa */
.input-group-harmony button,
.input-group-harmony input {
    /* Garante que a borda individual seja suave (da cor do tema) */
    border: 1px solid var(--border) !important; 
    border-radius: 8px !important;
    
    /* Garante que não tenham sombras escuras */
    box-shadow: none !important;
}

/* 3. Remove aquela linha grossa que aparece ao clicar */
.input-group-harmony button:focus,
.input-group-harmony input:focus {
    outline: none !important;
    border-color: var(--highlight-border) !important;
}

/* =======================================================
   NOVO DESIGN DE WIDGETS (PADRONIZADO)
   ======================================================= */
.widget-padrao {
    position: fixed !important;
    bottom: 25px !important;
    z-index: 2147483647 !important;
    
    /* Tamanho e Forma */
    height: 50px;
    padding: 0 25px;
    border-radius: 50px; /* Cápsula Perfeita */
    
    /* Layout do Texto */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* Fonte */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    
    /* Sombra e Borda */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.widget-padrao:active {
    transform: scale(0.95);
}

/* VARIAÇÃO 1: DESCANSO (Amarelo / Esquerda) */
.widget-descanso-style {
    left: 20px !important;
    right: auto !important;
    background: #FFD700 !important; /* Ouro/Amarelo */
    color: #000 !important;
    border-color: #000 !important;
}

/* VARIAÇÃO 2: TREINO (Azul / Direita) */
.widget-treino-style {
    right: 20px !important;
    left: auto !important;
    background: #0ea5e9 !important; /* Azul Sky */
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
}

/* =======================================================
   MODAL DE RESUMO (LAYOUT DE APP EM TELA CHEIA)
   ======================================================= */
#modalPreview {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    max-width: none !important; max-height: none !important;
    margin: 0 !important; border-radius: 0 !important;
    background: var(--card-bg) !important;
    z-index: 99999 !important;
}

/* Força o conteúdo a ocupar a altura toda */
#modalPreview .modal-content {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important; /* Zero padding externo */
    border: none !important;
    display: flex !important;
    flex-direction: column !important; /* Empilha: Topo, Meio, Baixo */
    background: transparent !important;
}

/* 1. CABEÇALHO (Fixo no Topo) */
#previewTitulo {
    flex: 0 0 auto; /* Não encolhe */
    padding: 25px 20px;
    text-align: center;
    background: var(--card-bg); /* Garante leitura sobre a lista */
    border-bottom: 1px solid var(--border);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 2. CORPO (Lista de Exercícios) - CRESCE */
#previewBody {
    flex: 1 !important; /* O segredo: ocupa todo o espaço livre */
    overflow-y: auto !important; /* Scroll apenas aqui */
    padding: 20px;
    padding-bottom: 40px; /* Espaço extra no fim */
}

/* 3. RODAPÉ (Botões) - Fixo em Baixo */
#previewFooter {
    flex: 0 0 auto; /* Não encolhe */
    padding: 20px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 2fr; /* Voltar menor, Iniciar maior */
    gap: 15px;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

/* ========================================= */
/* FORÇAR COR BRANCA NO BOTÃO DE PERÍODO */
/* ========================================= */
#badgeFase {
    color: #ffffff !important;                /* Força Branco */
    -webkit-text-fill-color: #ffffff !important; /* Garante Branco no Chrome/Safari */
    text-shadow: 0px 1px 3px #000000 !important; /* Sombra preta forte */
    background-clip: border-box !important;   /* Evita que o fundo recorte o texto */
    opacity: 1 !important;                    /* Garante visibilidade total */
    z-index: 9999 !important;                 /* Traz para frente de tudo */
    position: relative !important;
    display: inline-block !important;
}

/* ========================================= */
/* ESTILO PREMIUM: MEUS TREINOS (CYBER CARDS) */
/* ========================================= */

/* O Grid que segura os cards */
.grid-treinos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Colunas */
    gap: 15px;
    margin-bottom: 20px;
}

/* O Card Individual */
.card-treino-premium {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

.card-treino-premium:active {
    transform: scale(0.98);
}

/* Efeito de Brilho no topo */
.card-treino-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--cor-tema, #3b82f6); /* Cor dinâmica */
    box-shadow: 0 0 10px var(--cor-tema, #3b82f6);
}

/* Título do Treino */
.treino-titulo {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* Subtítulo (Qtd Exercícios) */
.treino-info {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 15px;
}

/* Botão de Play (Ozzy Style) */
.btn-play-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cor-tema, #3b82f6);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-play-card:hover {
    background: var(--cor-tema, #3b82f6);
    color: white;
    border-color: var(--cor-tema, #3b82f6);
}

/* Botão Excluir (Discreto no canto) */
.btn-del-card {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
}
.btn-del-card:hover { opacity: 1; color: #ef4444; }

/* Card de Adicionar Novo (Estilo tracejado) */
.card-novo-treino {
    border: 2px dashed #475569;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.2s;
}
.card-novo-treino:active { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; }

/* ========================================= */
/* ESTILO PREMIUM: CARDS COLORIDOS (V2) */
/* ========================================= */

.card-treino-premium {
    /* Fundo escuro, mas com um leve brilho interno da cor do tema */
    background: linear-gradient(145deg, #1e293b, #0f172a);
    
    /* Borda colorida translúcida */
    border: 1px solid color-mix(in srgb, var(--cor-tema, #3b82f6) 40%, transparent);
    
    /* Sombra interna sutil da cor do tema */
    box-shadow: inset 0 0 15px color-mix(in srgb, var(--cor-tema, #3b82f6) 15%, transparent);
    
    border-radius: 16px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
}

/* Efeito ao passar o mouse (fica mais brilhante) */
.card-treino-premium:hover {
    transform: translateY(-3px);
    border-color: var(--cor-tema, #3b82f6);
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--cor-tema, #3b82f6) 50%, transparent);
}

/* Brilho intenso no topo */
.card-treino-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: var(--cor-tema, #3b82f6);
    box-shadow: 0 2px 15px var(--cor-tema, #3b82f6);
    opacity: 0.9;
}

/* Ajuste no título */
.treino-titulo {
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
    margin: 5px 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#modalDescanso {
    z-index: 20000 !important; /* Maior que o modal de treino */
}
.btn-descanso-rpe.ativo {
    border-color: white !important;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

button:active {
    transform: scale(0.95);
    filter: brightness(1.2);
}

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

/* Estilo do Checkbox Customizado */
.check-serie:checked + .custom-check {
    background-color: #facc15 !important;
    border-color: #facc15 !important;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}
.check-serie:checked + .custom-check i {
    display: block !important;
    color: #020617 !important;
}

/* Efeito de clique nos botões */
button:active {
    transform: scale(0.92);
}

.card-home {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-home.hidden-rpg {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

.pixel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10px);
    grid-auto-flow: column; /* Faz preencher por colunas igual ao GitHub */
    gap: 4px;
    justify-content: center;
    padding: 10px 0;
}

#gridConsistencia {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 10px 0;
    max-width: 100%;
}

.pixel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-start;
    padding: 10px 0;
    min-height: 50px; /* Garante que o container não colapse */
}

.pixel-cell {
    width: 11px;
    height: 11px;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 2px;
    transition: background 0.3s ease;
}

#gridConquistas {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas fica perfeito no celular */
    gap: 20px 10px;
    padding: 10px;
}

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

.loader-rpg {
    text-align: center;
    padding: 40px;
    color: #facc15;
    font-family: 'Orbitron', sans-serif;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Localize o container que envolve as listas/pastas de treinos */
.container-pastas-treino, 
#listaMeusTreinos {
    display: flex;
    flex-direction: column; /* Força um abaixo do outro */
    gap: 15px;              /* Espaço entre as pastas */
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* Garante que o padding não "empurre" a tela */
}

/* Opcional: Se você quiser que no Computador (telas grandes) volte a ser 2 colunas */
@media (min-width: 900px) {
    .container-pastas-treino, 
    #listaMeusTreinos {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 20px;
    }
}

/* Container principal que segura todas as pastas */
#listaMeusTreinos {
    display: flex;
    flex-direction: column; /* Força uma pasta abaixo da outra */
    gap: 20px;              /* Espaço entre as pastas */
    width: 100%;
    max-width: 600px;       /* Otimizado para leitura no celular */
    margin: 0 auto;         /* Centraliza na tela */
    padding: 10px;
}

/* Estilo de cada "Pasta" (O fundo que você pediu) */
.pasta-treino {
    background: rgba(30, 41, 59, 0.7); /* Azul marinho translúcido (Tema Magma) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-left: 4px solid #facc15; /* Barra amarela lateral para destacar */
}

/* Garante que o título da pasta fique bem visível */
.pasta-treino h3 {
    margin-top: 0;
    color: #facc15;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(250, 204, 21, 0.2);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.input-treino-real {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #facc15; /* Texto amarelo para os números */
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    width: 60px;
}

/* --- FORÇA BRUTA: CARD RPG DOURADO --- */
.card-rpg-gold {
    background: linear-gradient(135deg, #000000 0%, #291000 100%) !important;
    background-color: #000000 !important;
    background-image: linear-gradient(135deg, #000000 0%, #291000 100%) !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

.card-rpg-gold * {
    /* Garante que nenhum texto fique cinza dentro dele */
    text-shadow: none;
}

.card-rpg-gold h3 {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* --- FORÇA BRUTA: CARD COACH CYBER --- */
.card-coach-cyber {
    /* Gradiente Preto para Azul Petróleo Profundo */
    background: linear-gradient(135deg, #000000 0%, #083344 100%) !important;
    background-color: #000000 !important;
    
    /* A Linha Neon Ciano em volta */
    border: 1px solid #06b6d4 !important;
    
    /* O Brilho Neon em volta */
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4) !important;
}

.card-coach-cyber * {
    text-shadow: none;
}

/* Título brilhante */
.card-coach-cyber h3 {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.6) !important;
}

/* --- FORÇA BRUTA: MODAL OFENSIVA (MAGMA STYLE) --- */
.modal-inferno {
    /* Gradiente Preto para Vermelho Sangue */
    background: linear-gradient(135deg, #0f0505 0%, #450a0a 100%) !important;
    background-color: #0f0505 !important;
    
    /* Borda Laranja Neon */
    border: 1px solid #f97316 !important;
    
    /* Sombra de Fogo */
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.4) !important;
    position: relative;
    overflow: hidden;
}

/* Texto de Fogo (Degradê no texto) */
.text-fire {
    background: linear-gradient(to bottom, #fde047, #f97316, #ef4444);
    -webkit-background-clip: text; /* Para Safari/Chrome antigo */
    background-clip: text;         /* Propriedade padrão (Resolve o aviso) */
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
    font-family: 'Orbitron', sans-serif;
}

/* Partículas de brasa no fundo */
.ember-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#f97316 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* --- FORÇA BRUTA: MODAL OFENSIVA (MAGMA STYLE) --- */
.modal-inferno {
    /* Gradiente Preto para Vermelho Sangue */
    background: linear-gradient(135deg, #0f0505 0%, #450a0a 100%) !important;
    background-color: #0f0505 !important;
    
    /* Borda Laranja Neon */
    border: 1px solid #f97316 !important;
    
    /* Sombra de Fogo */
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.4) !important;
    position: relative;
    overflow: hidden;
}

/* Texto de Fogo (Degradê no texto) */
.text-fire {
    background: linear-gradient(to bottom, #fde047, #f97316, #ef4444);
    -webkit-background-clip: text; /* Para Safari/Chrome antigo */
    background-clip: text;         /* Propriedade padrão (Resolve o aviso) */
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
    font-family: 'Orbitron', sans-serif;
}

/* Partículas de brasa no fundo */
.ember-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#f97316 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* --- CORREÇÃO FINAL: MODAL RPG (SEM TRAVAMENTO E SEM "COBRAS") --- */

.modal-rpg-legendary {
    /* Garante o fundo preto/dourado */
    background: linear-gradient(135deg, #000000 0%, #291000 100%) !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.3) !important;
    border-radius: 24px !important;
    color: white !important;
    
    /* FIX DO SCROLL: Flexbox vertical para segurar o cabeçalho e rodapé */
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important; /* Limite de altura para não estourar a tela */
    overflow: hidden !important; /* Corta o que passar da borda arredondada */
}

/* Título */
.title-legendary {
    flex-shrink: 0; /* Não deixa o título encolher */
    font-family: 'Orbitron', sans-serif;
    color: #fcd34d !important;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    padding-bottom: 15px;
}

/* Área de Rolagem (A Lista) */
#listaNiveisRPG {
    flex: 1; /* Ocupa todo o espaço disponível no meio */
    overflow-y: auto !important; /* Habilita o scroll APENAS aqui */
    padding-right: 5px; /* Espaço para não colar na barra de rolagem */
    margin-bottom: 15px;
    min-height: 0; /* Correção para Firefox/Flexbox */
}

/* --- A CURA DAS "COBRAS" --- */
/* O seletor '>' garante que só o ITEM DA LISTA tenha borda, e não o texto dentro dele */
#listaNiveisRPG > div {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    margin-bottom: 8px;
    border-radius: 8px;
    padding: 12px;
    color: #cbd5e1 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Remove qualquer borda estranha dos itens internos (texto, ícones) */
#listaNiveisRPG > div div,
#listaNiveisRPG > div span {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Item Ativo (Nível Atual) */
#listaNiveisRPG > div[style*="background"] {
    border-color: #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15) !important;
    background: rgba(245, 158, 11, 0.1) !important; /* Fundo dourado suave */
}

/* Botão de Voltar */
.btn-gold-action {
    flex-shrink: 0; /* Não deixa o botão sumir */
    background: linear-gradient(90deg, #d97706, #f59e0b) !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    border: none !important;
    text-transform: uppercase;
    padding: 15px !important;
    border-radius: 12px !important;
    cursor: pointer;
}

/* --- FORÇA BRUTA: MODAL PROVA REAL (CYBER SCANNER) --- */

#modalProvaReal .modal-content {
    /* Fundo Tecnológico Escuro */
    background: linear-gradient(135deg, #000000 0%, #0f172a 100%) !important;
    padding: 30px 20px !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Espalha o conteúdo */
}

/* Área da Câmera (O Viewfinder) */
#previewContainer {
    width: 100% !important;
    max-width: 320px !important;
    aspect-ratio: 3/4 !important; /* Formato retrato de foto */
    height: auto !important;
    background: #000 !important;
    border: 2px solid #334155 !important;
    border-radius: 20px !important;
    position: relative !important;
    box-shadow: 0 0 30px rgba(0,0,0,0.8) !important;
    overflow: hidden !important;
    margin: 20px auto !important;
}

/* Cantos da Mira (Efeito Visual) */
#previewContainer::before {
    content: '';
    position: absolute;
    top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    pointer-events: none;
    z-index: 5;
}

/* Linha de Scanner (Animação) */
.scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: #10b981; /* Verde Scanner */
    box-shadow: 0 0 15px #10b981;
    animation: scanning 3s infinite linear;
    z-index: 10;
    opacity: 0.6;
}

@keyframes scanning {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* Botão de Câmera Gigante */
.btn-camera-action {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 4px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    transition: transform 0.1s !important;
}
.btn-camera-action:active { transform: scale(0.9); }

/* Texto de XP Dourado */
#valorXP {
    font-family: 'Orbitron', sans-serif !important;
    background: linear-gradient(to bottom, #fde047, #eab308) !important;
    -webkit-background-clip: text; /* Para Safari/Chrome antigo */
    background-clip: text;         /* Propriedade padrão (Resolve o aviso) */
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.5)) !important;
}

/* --- FORÇA BRUTA: MODAL SETUP (ENGINEERING BLUEPRINT) --- */

.modal-setup-tech {
    /* Fundo Azul Profundo Técnico */
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%) !important;
    
    /* Borda Azul "Blueprint" */
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.25) !important;
    
    border-radius: 16px !important;
    color: #e2e8f0 !important;
    position: relative;
    overflow: hidden;
}

/* Efeito de Grade (Blueprint) no fundo */
.tech-grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* Título Técnico */
.tech-title {
    font-family: 'Orbitron', sans-serif !important;
    color: #38bdf8 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Input estilo Terminal */
#inputSetupMaquina {
    background: rgba(2, 6, 23, 0.8) !important;
    border: 1px solid #0ea5e9 !important; /* Azul Sky */
    color: #38bdf8 !important;
    font-family: 'Courier New', monospace !important; /* Fonte de código */
    font-weight: bold !important;
    letter-spacing: 1px !important;
    box-shadow: inset 0 0 15px rgba(14, 165, 233, 0.1) !important;
}

#inputSetupMaquina::placeholder {
    color: rgba(56, 189, 248, 0.3) !important;
    font-family: sans-serif !important; /* Placeholder normal para leitura */
    font-weight: normal !important;
}

/* Botão Salvar (Estilo Mecânico) */
.btn-save-tech {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border: 1px solid #7dd3fc !important;
    color: white !important;
    font-family: 'Orbitron', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important;
}

/* --- FIX DEFINITIVO: BADGE DE PERIODIZAÇÃO (HIPERTROFIA/FORÇA) --- */
#badgeFase {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    text-shadow: 0px 1px 3px #000000 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    
    /* Z-index 100: Acima do app, mas ABAIXO do Login (que é 5000) */
    z-index: 100 !important; 
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 10px;
}

/* --- FIX: ESCONDER ABAS NA TELA DE LOGIN --- */

/* Se o login NÃO estiver escondido, esconde a barra de abas */
#loginScreen:not(.hidden) ~ .tabs,
#loginScreen:not(.hidden) ~ footer,
#loginScreen:not(.hidden) ~ .nav-tabs,
#loginScreen:not(.hidden) ~ nav {
    display: none !important;
}

/* Garante que a tela de login cubra absolutamente tudo */
#loginScreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important; /* Valor maior que o das abas */
    background-color: #0f172a !important; /* Cor sólida para não vazar nada atrás */
}

/* --- FORÇA BRUTA: MODAL HIIT (COMBAT PROTOCOL) --- */
.modal-hiit-combat {
    background: linear-gradient(135deg, #000000 0%, #450a0a 100%) !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* Efeito de Scanline de Alerta */
.hiit-scanline {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(239, 68, 68, 0.05) 2px, rgba(239, 68, 68, 0.05) 3px);
    pointer-events: none;
    z-index: 1;
}

/* Timer de Alta Visibilidade */
#hiitTimer {
    font-family: 'Orbitron', monospace !important;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    letter-spacing: 2px;
}

/* Inputs Estilizados (Estilo Terminal) */
.hiit-input-box {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Status de Texto */
#hiitStatus {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Correção de tamanho para os dias da agenda */
#gridDiasAgenda div, .cal-day {
    width: auto !important; /* Deixa o grid controlar a largura */
    min-width: 0 !important; /* Permite encolher em telas pequenas */
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* Em telas muito pequenas, reduzimos a fonte para não empurrar a largura */
@media (max-width: 360px) {
    #gridDiasAgenda div, .cal-day {
        font-size: 0.75rem !important;
    }
}

/* --- FORÇA BRUTA: MODAL HIIT (COMBAT PROTOCOL) --- */
.modal-hiit-combat {
    background: linear-gradient(135deg, #000000 0%, #450a0a 100%) !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* Efeito de Scanline de Alerta */
.hiit-scanline {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(239, 68, 68, 0.05) 2px, rgba(239, 68, 68, 0.05) 3px);
    pointer-events: none;
    z-index: 1;
}

/* --- AJUSTE: TIMER HIIT MAIS DISCRETO --- */
#hiitTimer {
    font-family: 'Orbitron', monospace !important;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    letter-spacing: 2px;
    font-size: 5rem !important; /* Reduzido de 7rem para 5rem */
}

/* Inputs Estilizados (Estilo Terminal) */
.hiit-input-box {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Status de Texto */
#hiitStatus {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- FORÇA BRUTA: MODAL CARDIO (PERFORMANCE TRACKER) --- */

.modal-cardio-performance {
    background: linear-gradient(135deg, #000000 0%, #064e3b 100%) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important;
    border-radius: 20px !important;
    color: #ecfdf5 !important;
    position: relative;
    overflow: hidden;
}

/* Efeito de Pulso no Fundo */
.pulse-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#10b981 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.1;
    pointer-events: none;
}

/* Título de Performance */
.performance-title {
    font-family: 'Orbitron', sans-serif !important;
    color: #10b981 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Inputs Estilo Monitor */
.cardio-input {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #059669 !important;
    color: #34d399 !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    padding: 10px !important;
    transition: all 0.3s;
}

.cardio-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
    outline: none;
}

.cardio-label {
    font-size: 0.65rem !important;
    color: #6ee7b7 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* --- ESTILO MAPA CORPORAL --- */
.card-body-map {
    transition: transform 0.3s ease;
}

@keyframes scannerMove {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Efeito nas zonas do corpo (quando o SVG carregar) */
.zona-clicavel { 
    cursor: pointer; 
    transition: all 0.3s ease; 
    fill: rgba(14, 165, 233, 0.1); /* Cor padrão das partes do corpo */
    stroke: rgba(14, 165, 233, 0.3);
    stroke-width: 0.5;
}

.zona-clicavel:hover { 
    fill: rgba(14, 165, 233, 0.4) !important; 
    filter: drop-shadow(0 0 8px #0ea5e9); 
}

/* Classe para destacar partes fadigadas (usada via JS) */
.fadiga-alta {
    fill: rgba(239, 68, 68, 0.4) !important;
    stroke: #ef4444 !important;
}

/* 🚫 ESCONDE QUALQUER ITEM DE LISTA NA FORÇA BRUTA */
#containerHistorico .card-historico-item,
#containerHistorico .historico-item,
#listaHistorico .card-historico-item,
#listaHistorico .historico-item {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ✅ GARANTE QUE O NOSSO BOTÃO APAREÇA */
.botao-arquivo-geral {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* 🚫 ESCONDE QUALQUER ITEM DE LISTA NA FORÇA BRUTA */
#containerHistorico .card-historico-item,
#containerHistorico .historico-item,
#listaHistorico .card-historico-item,
#listaHistorico .historico-item {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ✅ GARANTE QUE O NOSSO BOTÃO APAREÇA */
.botao-arquivo-geral {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

.cyber-act-btn {
    position: relative;
    /* Fundo semi-transparente para o gradiente de trás aparecer */
    background: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

    /* GRID LAYOUT */
    .activity-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* ESTILO DOS BOTÕES CYBER */
    .cyber-act-btn {
        position: relative;
        background: rgba(30, 41, 59, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 15px 5px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        overflow: hidden;
    }

    /* Efeito de Borda Colorida (baseada na variável --glow) */
    .cyber-act-btn::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 4px; height: 100%;
        background: var(--glow);
        opacity: 0.5;
        transition: 0.2s;
    }

    /* Hover Effects */
    .cyber-act-btn:hover {
        background: rgba(30, 41, 59, 0.8);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        border-color: var(--glow);
    }
    .cyber-act-btn:hover::before {
        opacity: 1;
        width: 100%; /* Preenche o fundo levemente */
        height: 100%;
        opacity: 0.1;
    }
    .cyber-act-btn:active {
        transform: scale(0.95);
    }

    /* Texto e Ícone */
    .cyber-act-btn .icon {
        font-size: 1.4rem;
        filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    }
    .cyber-act-btn .label {
        font-size: 0.65rem;
        color: #cbd5e1;
        font-weight: bold;
        font-family: 'Inter', sans-serif;
        letter-spacing: 0.5px;
    }
    .cyber-act-btn:hover .label {
        color: white;
        text-shadow: 0 0 5px var(--glow);
    }

    /* --- CORREÇÕES DE TEMA (MANTIDAS DO SEU CÓDIGO) --- */
    .macro-box-icon, 
    div[style*="background:rgba(255,255,255,0.05)"] {
        background-color: var(--input-bg) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-main) !important;
    }
    #infoMusculo {
        background-color: var(--card-bg) !important;
        border-color: var(--border) !important;
        color: var(--text-muted) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    #containerDieta .card-treino > div[style*="background:rgba(0,0,0,0.2)"] {
        background-color: var(--input-bg) !important;
        border: 1px solid var(--border);
        color: var(--text-main);
    }
    input[type="checkbox"] {
        accent-color: #10b981;
    }

    /* ESTILOS DO CALENDÁRIO */
    .cal-day-name {
        color: #64748b;
        font-size: 0.75rem;
        font-weight: bold;
        font-family: 'Orbitron';
    }

    /* Estilo para os dias gerados pelo seu JS existente */
    #gridDiasAgenda div {
        width: 100%;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 0.9rem;
        color: #cbd5e1;
        cursor: pointer;
        transition: 0.2s;
        border: 1px solid transparent;
        position: relative;
    }

    #gridDiasAgenda div:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
        color: white;
    }

    /* Se o seu JS adiciona uma classe 'hoje' ou 'active', vamos estilizar */
    #gridDiasAgenda .hoje, 
    #gridDiasAgenda .active {
        background: #3b82f6;
        color: white;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        border: 1px solid #60a5fa;
        font-weight: bold;
    }

    /* Indicador de Treino Feito (Bolinha) - Caso seu JS use */
    .treino-feito::after {
        content: '';
        position: absolute;
        bottom: 4px;
        width: 4px;
        height: 4px;
        background: #10b981; /* Verde */
        border-radius: 50%;
        box-shadow: 0 0 5px #10b981;
    }

    /* BOTÃO HIIT */
    .btn-hiit-cyber {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #ef4444, #dc2626); /* Vermelho Perigo */
        color: white;
        font-family: 'Orbitron';
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        transition: transform 0.2s;
        position: relative;
        overflow: hidden;
        animation: pulse-red 2s infinite;
    }

    .btn-hiit-cyber:hover {
        transform: scale(1.02);
        background: linear-gradient(135deg, #f87171, #ef4444);
    }

    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }

    /* No seu arquivo style.css */
.card-treino {
    background: radial-gradient(circle at center, #064e3b 0%, #050505 100%) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Estilo para os cards de treinos salvos */
.grid-treinos > div, .folder-content > div {
    background: rgba(16, 185, 129, 0.05) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.grid-treinos > div:hover {
    border-color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* Container do topo do calendário */
.cabecalho-calendario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
}

/* Estilo do Título (Mês e Ano) */
#tituloMesAno {
    font-size: 1.1rem;
    color: #fff;
    text-transform: capitalize; /* Deixa a primeira letra maiúscula */
    font-weight: 700;
}

/* Botões de Navegação (< e >) */
.btn-nav-cal {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #10b981; /* Verde Emerald */
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-nav-cal:hover {
    background: #10b981;
    color: #000;
    transform: scale(1.1);
}

.btn-nav-cal:active {
    transform: scale(0.95);
}

/* Container Geral */
.tabs-container {
    width: 100%;
    background: #000;
    margin-bottom: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* A Lista Rolável */
.tabs {
    display: flex !important;
    flex-direction: row !important; /* FORÇA linha horizontal */
    align-items: center !important;
    gap: 10px;
    padding: 15px;
    overflow-x: auto;
    white-space: nowrap; /* Garante que os botões fiquem um ao lado do outro */
}
.tabs::-webkit-scrollbar { display: none; }

/* --- O BOTÃO (ESTILO PÍLULA) --- */
.tab-btn {
    /* Flexbox Obrigatório */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important; /* Ícone na esquerda, texto na direita */
    
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    
    height: 44px !important;
    padding: 0 16px !important; /* Espaço fixo nas laterais */
    border-radius: 50px !important;
    
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Remove qualquer largura fixa antiga */
    width: auto !important;
    min-width: fit-content;
}

/* Tamanho do Emoji */
.tab-btn .emoji {
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1;
    margin-right: 0; /* Começa sem margem */
    transition: margin 0.3s ease;
}

/* --- O TEXTO (ESCONDIDO vs MOSTRADO) --- */
.tab-text {
    display: inline-block !important;
    max-width: 0 !important;       /* Largura Zero = Escondido */
    opacity: 0;
    overflow: hidden;
    white-space: nowrap !important; /* PROIBIDO QUEBRAR LINHA */
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.4s ease;
    height: auto;
}

/* --- ESTADO ATIVO (QUANDO CLICA) --- */
.tab-btn.active {
    background: rgba(30, 30, 30, 1) !important;
    padding-right: 22px !important; /* Dá espaço extra na direita */
}

/* Cores Neon no Ativo */
.tab-btn[data-cor="verde"].active    { border-color: #10b981; color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
.tab-btn[data-cor="azul"].active     { border-color: #3b82f6; color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
.tab-btn[data-cor="dourado"].active  { border-color: #facc15; color: #facc15; box-shadow: 0 0 15px rgba(250, 204, 21, 0.4); }
.tab-btn[data-cor="rosa"].active     { border-color: #ec4899; color: #ec4899; box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); }
.tab-btn[data-cor="laranja"].active  { border-color: #f97316; color: #f97316; box-shadow: 0 0 15px rgba(249, 115, 22, 0.4); }
.tab-btn[data-cor="roxo"].active     { border-color: #8b5cf6; color: #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); }
.tab-btn[data-cor="vermelho"].active { border-color: #ef4444; color: #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }

/* REVELA O TEXTO E EMPURRA O ÍCONE */
.tab-btn.active .tab-text {
    max-width: 150px !important; /* Abre espaço para o texto */
    opacity: 1 !important;
    margin-left: 8px !important; /* Cria o espaço entre o ícone e o texto */
}

/* --- ESTILO SYSTEM LOG (VISUAL AZUL NEON FORÇADO) --- */
.sys-log-card {
    background: rgba(5, 11, 20, 0.95) !important; /* Fundo Quase Preto Azulado */
    border: 1px solid rgba(59, 130, 246, 0.3) !important; /* Borda Azul Fina */
    border-left: 4px solid #3b82f6 !important; /* Barra Neon Esquerda Grossa */
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
}

/* Efeito Hover (Ao passar o mouse) */
.sys-log-card:active, .sys-log-card:hover {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2) !important;
}

/* Título do Treino */
.sys-log-title {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.6) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* Texto Técnico (Data, Hora, ID) */
.sys-log-code {
    font-family: monospace !important;
    color: #94a3b8 !important; /* Cinza azulado claro */
    font-size: 0.75rem !important;
}

/* Etiqueta de Status */
.sys-log-tag {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    padding: 2px 8px !important;
    font-size: 0.65rem !important;
    border-radius: 4px !important;
    font-family: monospace !important;
}

/* --- TEMA NUTRIÇÃO: DEGRADÊ ROSA & PRETO --- */
.card-rosa-neon {
    /* Fundo: Preto no topo, descendo para um Rosa/Roxo bem escuro */
    background: linear-gradient(160deg, #020617 40%, #290514 100%) !important;
    
    /* Borda Neon */
    border: 1px solid #ec4899 !important;
    
    /* Sombra brilhante */
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15) !important;
    
    /* Arredondamento */
    border-radius: 16px !important;
}

/* --- CLASSE PARA FORÇAR O TEMA ROSA NEON --- */
.card-rosa-force {
    /* Fundo: Preto descendo para Rosa Escuro */
    background: linear-gradient(180deg, #020617 0%, #3a0818 100%) !important;
    
    /* Borda Rosa Neon */
    border: 1px solid #ec4899 !important;
    
    /* Sombra Rosa */
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.15) !important;
    
    /* Garante que o fundo não seja transparente */
    opacity: 1 !important;
}

/* Ajuste para os itens da lista dentro desse card */
.card-rosa-force .cyber-check-item {
    background: rgba(2, 6, 23, 0.6) !important;
    border-color: #334155 !important;
}
.card-rosa-force .cyber-check-item:hover {
    border-color: #ec4899 !important;
    background: rgba(236, 72, 153, 0.1) !important;
}

/* --- FORÇAR CARD PROTOCOLO (ROSA NEON) --- */
/* O :not(.card-nutri) evita que este bloco antigo brigue com o layout novo da
   aba (ele forçava padding:20px e border-radius:16px no card inteiro). */
#cardProtocolo:not(.card-nutri) {
    /* Fundo: Preto descendo para Rosa Escuro */
    background: linear-gradient(180deg, #020617 0%, #3a0818 100%) !important;
    
    /* Borda Rosa Neon */
    border: 1px solid #ec4899 !important;
    
    /* Sombra Rosa */
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.15) !important;
    
    /* Garante formato */
    border-radius: 16px !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Força os itens da lista a ficarem escuros para destacar o neon */
#cardProtocolo .cyber-check-item {
    background: rgba(2, 6, 23, 0.6) !important;
    border: 1px solid #334155 !important;
}

/* Efeito Hover nos itens */
#cardProtocolo .cyber-check-item:hover {
    border-color: #ec4899 !important;
    background: rgba(236, 72, 153, 0.1) !important;
}

/* --- ESTILOS LARANJA NEON (DIETA REVISADA) --- */

/* Botão Neon Principal (Importar PDF) */
.btn-neon-orange {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid #f59e0b;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
    transition: all 0.3s ease;
}
.btn-neon-orange:hover {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

/* Botão Outline (Original) */
.btn-outline-orange {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-outline-orange:hover {
    color: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

/* Botão Plasma Final (Reiniciar) */
.btn-plasma-orange-final {
    background: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 18px;
    border-radius: 12px;
    font-family: 'Orbitron';
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.05);
}
.btn-plasma-orange-final:hover {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
    letter-spacing: 3px;
}

/* --- BOTÕES PADRONIZADOS (ALTURA TRAVADA) --- */
.btn-neon-orange {
    height: 48px !important; 
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important; /* Resolve o "um pouco para baixo" */
    margin: 0 !important;
    padding: 0 20px !important;
    
    /* Estilo Visual */
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    transition: 0.3s !important;
}

.btn-neon-orange:hover {
    background: #f59e0b !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Imagem do Avatar na Lista */
.rank-avatar-img {
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    border: 2px solid #ef4444; /* Borda Vermelha */
    object-fit: cover;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* --- ESTILOS DO PODIO (AJUSTADO) --- */
.podium-card {
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), rgba(0,0,0,0.8));
    border: 2px solid #ef4444; 
    border-radius: 16px; 
    padding: 10px; 
    width: 30%;
    position: relative;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    overflow: visible !important; /* Para o número sair, mas o conteúdo ficar */
}

/* Número Flutuante */
.podium-rank-number {
    position: absolute;
    top: -40px; 
    left: 0; right: 0;
    text-align: center;
    font-family: 'Orbitron'; font-weight: 900; font-size: 2.2rem;
    text-shadow: 0 0 15px #ef4444;
    animation: floatNumber 3s ease-in-out infinite;
    z-index: 10;
}

/* --- ALTURAS CORRIGIDAS (MAIORES PARA CABER O XP) --- */
.podium-1 { 
    height: 190px; /* Aumentado */
    border-color: #facc15; 
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4), inset 0 0 20px rgba(250, 204, 21, 0.2);
}
.podium-2 { 
    height: 165px; /* Aumentado */
    opacity: 0.95; 
}
.podium-3 { 
    height: 145px; /* Aumentado (antes era 110px) */
    opacity: 0.9; 
}

.crown { position: absolute; top: -25px; font-size: 1.5rem; z-index: 11; }

/* Ajuste do texto interno para não vazar */
.podium-info {
    margin-top: 15px; /* Mais espaço do topo */
    text-align: center; width: 100%;
    display: flex; flex-direction: column; 
    align-items: center;
    justify-content: flex-end; /* Empurra conteúdo pro final */
    height: 100%;
}

.podium-xp-text {
    font-family: 'Orbitron'; 
    font-size: 0.75rem; /* Fonte um pouco menor para segurança */
    margin-top: auto; 
    font-weight: bold; 
    background: rgba(0,0,0,0.4); 
    padding: 2px 8px; 
    border-radius: 4px;
    width: 100%;
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Container Principal do Modal */
.modal-content-red {
    background: #090e1a !important; /* Fundo Deep Dark */
    border: 2px solid #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
    border-radius: 20px;
    padding: 25px 15px;
    position: relative;
    color: white;
}

/* Botão Fechar (O "X") - Posicionamento Fixo no Canto */
.btn-close-red {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10;
}

.btn-close-red:hover {
    background: #ef4444;
    color: white;
}

/* Card de Perfil dentro do Modal (Onde está o Valter) */
.modal-profile-card {
    background: linear-gradient(145deg, #161d2f, #0f172a) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Cards de Histórico/Treino dentro do Modal */
.modal-history-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 4px solid #ef4444 !important; /* Detalhe Red Cyber */
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
}

/* Títulos secundários (Histórico Recente) */
.modal-section-title {
    font-family: 'Orbitron';
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 10px 0;
}

.modal-section-title::before, .modal-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(239, 68, 68, 0.2);
}

/* 1. Primeiro, definimos como o modal se comporta quando está ATIVO */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 13, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999; /* Garante que fica em cima de tudo */
    
    /* Centralização Flex */
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* 2. O PULO DO GATO: Esta regra precisa vir DEPOIS e ser mais forte que o flex */
.modal-overlay.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 3. Estilo do Conteúdo (Red Cyber) */
.modal-content-red, .modal-content {
    background: #090e1a !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3) !important;
    border-radius: 24px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    color: white;
}

/* --- TELA DE CLASSIFICAÇÃO (RANKING) --- */

/* Remove o fundo preto/cinza da aba de ranking */
#aba-ranking, .ranking-container {
    background: transparent !important;
    padding: 10px;
}

/* Título da Lista (Remover o "ranking-lista" se ele estiver como texto solto) */
.ranking-title {
    font-family: 'Orbitron', sans-serif;
    color: #ef4444;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 20px 0 10px 0;
    letter-spacing: 2px;
}

/* ESTILO DOS CARDS DA LISTA (Onde estão 2º, 3º lugar...) */
.ranking-item {
    background: rgba(255, 255, 255, 0.03) !important; /* Quase transparente */
    border: 1px solid rgba(239, 68, 68, 0.1) !important;
    border-left: 4px solid #ef4444 !important; /* Detalhe lateral vermelho */
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 15px !important;
    display: flex;
    align-items: center;
    color: white !important;
    transition: 0.3s;
}

.ranking-item:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    transform: translateX(5px);
}

/* Números da posição (2º, 3º...) */
.ranking-posicao {
    font-family: 'Orbitron', sans-serif;
    color: #ef4444;
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.1rem;
    min-width: 30px;
}

/* Nome do Atleta na lista */
.ranking-nome {
    font-weight: 600;
    color: #f8fafc !important;
    flex-grow: 1;
}

/* XP na lista */
.ranking-xp-valor {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Isso mata o fundo do bloco inteiro (Título + Cards) */
#aba-ranking, 
.ranking-container, 
#rankingContent {
    background: none !important;      /* Remove qualquer cor */
    background-color: transparent !important; 
    box-shadow: none !important;      /* Remove sombras que pareçam fundo */
    border: none !important;          /* Remove bordas que limitem o bloco */
    padding-top: 20px;
}

/* Se houver uma div interna que segura os cards, limpamos ela também */
.ranking-list-wrapper {
    background: transparent !important;
}

/* --- CARD DA LISTA (TRANSPARENTE E NEON) --- */
.rank-card-red {
    display: flex; align-items: center; justify-content: space-between;
    
    /* REMOVIDO O PRETO SÓLIDO: Agora usa um vidro fumê sutil */
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(4px); /* Efeito de vidro */
    
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}

.rank-card-red:hover {
    transform: translateX(5px);
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* --- ESTILOS DO PODIO (MAIS LEVE) --- */
.podium-card {
    display: flex; flex-direction: column; align-items: center;
    /* Fundo mais suave para não parecer um bloco pesado */
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.1), rgba(0,0,0,0.4)) !important;
    border: 2px solid #ef4444; 
    border-radius: 16px; padding: 10px; width: 30%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Ajuste no Pódio 1 (Ouro) para não brilhar amarelo demais */
.podium-1 { 
    height: 160px; 
    border-color: #ef4444; /* Mantendo o padrão RED */
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

@keyframes loading-pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}
.loading-pulse { animation: loading-pulse 1.5s infinite; }

/* Efeito de brilho nas conquistas */
.badge-item {
    width: 45px; height: 45px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    position: relative;
    transition: all 0.3s ease;
}

.badge-raridade {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    border-color: #ef4444 !important;
}

.foto-prova-container img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #ef4444;
    cursor: zoom-in;
    transition: transform 0.3s;
}

.foto-prova-container img:hover {
    transform: scale(1.02);
}

/* 1. Esconde a barra globalmente mas mantém o movimento */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* 2. Garante que não haja sobra lateral (barra de lado) */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 3. Ajuste para o conteúdo do modal RPG não criar barra interna feia */
#listaNiveisRPG {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
}

/* Esconde as setinhas nativas do navegador em campos de número (Essencial para o Fold 5) */
input[type="number"].hide-arrows::-webkit-inner-spin-button,
input[type="number"].hide-arrows::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].hide-arrows {
    -moz-appearance: textfield; /* Firefox */
}

/* =========================================
   ANIMAÇÕES E SCROLLBAR CUSTOMIZADO (MODAIS)
========================================= */
@keyframes modalSurgir { 
    from { opacity: 0; transform: scale(0.9); } 
    to { opacity: 1; transform: scale(1); } 
}

.custom-scrollbar::-webkit-scrollbar { 
    width: 4px; 
    height: 4px; /* Adicionado para rolagem horizontal também */
}

.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #10b981; 
    border-radius: 10px; 
}

/* Exemplo de como mudar a cor do boneco dependendo do tema */
.tema-dark .boneco-rpg { filter: drop-shadow(0 0 5px #3b82f6); }
.tema-pink .boneco-rpg { filter: drop-shadow(0 0 5px #ec4899); }

/* Garante que o conteúdo do modal não escape da tela */
.modal-content {
    max-height: 90vh; /* Máximo de 90% da altura da tela */
    display: flex;
    flex-direction: column;
}

/* Cria uma área de rolagem apenas para a lista de músculos, se necessário */
#listaMusculosScan {
    overflow-y: auto;
    max-height: 250px; /* Limita a altura da lista */
    padding-right: 5px;
}

/* Estilização da barra de rolagem para ficar elegante (Emerald Style) */
#listaMusculosScan::-webkit-scrollbar {
    width: 4px;
}
#listaMusculosScan::-webkit-scrollbar-thumb {
    background: #22d3ee;
    border-radius: 10px;
}

@keyframes scannerMove {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* Estilo para destacar o músculo clicado no SVG */
.musculo-ativo {
    fill: #0ea5e9 !important;
    filter: drop-shadow(0 0 5px #0ea5e9);
    transition: 0.3s;
}

.musculo-lesao {
    fill: #ef4444 !important;
    animation: pulse 1.5s infinite;
}

.hidden {
    display: none !important;
}

/* ===== ABA CORPO - IDENTIDADE ===== */
.input-corpo {
    width: 100%;
    height: 38px;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
    color: #f1f5f9 !important;
    padding: 0 10px;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border 0.3s;
    box-sizing: border-box;
}
.input-corpo:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245,158,11,0.2);
}
.input-corpo-verde {
    border-color: rgba(16,185,129,0.35) !important;
    color: #10b981 !important;
}
.input-corpo-verde:focus { border-color: #10b981 !important; }

.label-corpo {
    font-size: 0.55rem;
    color: #64748b;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 5px;
}
.label-corpo-gold { color: #f59e0b; }
.label-corpo-green { color: #10b981; }
.label-corpo-purple { color: #8b5cf6; }

.display-corpo {
    width: 100%;
    height: 38px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.display-corpo-gold {
    border: 1px solid rgba(245,158,11,0.4);
    color: #f59e0b;
}
.display-corpo-purple {
    border: 1px solid rgba(139,92,246,0.4);
    color: #8b5cf6;
    font-size: 0.75rem;
}

/* ===== MEDIDAS ===== */
.input-cyber-amber {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(245,158,11,0.2) !important;
    color: #f1f5f9 !important;
}
.input-cyber-amber:focus {
    border-color: #f59e0b !important;
    background: rgba(245,158,11,0.05) !important;
    box-shadow: 0 0 8px rgba(245,158,11,0.2);
}

/* ===== MEDIDAS + BIOIMPEDÂNCIA ===== */
input.input-bio-amber,
input.input-cyber-amber {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
}
input.input-bio-amber:focus,
input.input-cyber-amber:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245,158,11,0.2) !important;
}

/* ===== HISTÓRICO PESAGEM ===== */
#listaPesos li {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(245,158,11,0.2) !important;
    border-radius: 10px !important;
}

/* ===== INPUT DATE GLOBAL ===== */
input[type="date"],
input[type="time"] {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}

/* =======================================================
   MENUS SUSPENSOS (hambúrguer, "+ ações", opções do ranking…)
   Precisam de fundo 100% opaco: eles flutuam sobre listas e
   cards, e qualquer transparência deixa o texto de trás
   aparecendo por baixo, ilegível.
   Fica no fim do arquivo de propósito — assim vence, na ordem
   da cascata, as várias regras genéricas com !important
   espalhadas acima (div[style*="background"], [style*="#1e293b"]…).
   ======================================================= */
.menu-flutuante,
div.menu-flutuante {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;      /* mata gradientes herdados */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;       /* sem blur: o fundo já é sólido */
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85) !important;
    z-index: 100000 !important;
    isolation: isolate;                     /* contexto próprio de empilhamento */

    /* O menu principal tem uma dúzia de itens e passava da altura da
       tela: os últimos ficavam fora, sem jeito de alcançar. Agora ele
       rola por dentro. overscroll-behavior impede que o embalo continue
       na página atrás quando a rolagem do menu chega ao fim. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* LARGURA. Rede de seguranca para todos os menus flutuantes: nenhum
       pode passar da tela. NAO usar width:max-content aqui — com o
       overflow-y acima, o overflow-x deixa de ser 'visible' por regra do
       CSS, e um conteudo mais largo que o teto vira rolagem horizontal com
       o texto cortado, em vez de um menu mais estreito. */
    max-width: calc(100vw - 24px);
}

/* O MENU PRINCIPAL e ancorado na TELA, nao no botao.
   Ele e absolute dentro de um wrapper que tem a largura do botao (34px), e
   esse wrapper e o bloco que o contem: a largura era calculada contra 34px e
   o menu escapava para fora da borda esquerda. Com position:fixed e uma
   largura definida, ele passa a depender so da janela.
   Os outros menus flutuantes (pasta, ficha, ranking) continuam absolute:
   eles precisam acompanhar o proprio botao quando a pagina rola. */
#menuPrincipal {
    position: fixed !important;
    top: 58px !important;
    right: 12px !important;
    left: auto !important;
    width: 236px;
    max-width: calc(100vw - 24px);
    min-width: 0 !important;   /* vence o min-width:200px do atributo style */
}

/* Os rotulos quebram se precisarem. Com nowrap, um rotulo mais largo que o
   menu vazava para fora e era o texto que aparecia cortado. */
.menu-flutuante > button,
.menu-flutuante > div > button {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

/* Os itens de dentro não podem ganhar fundo de nenhuma regra genérica */
.menu-flutuante > button,
.menu-flutuante > div > button {
    background-color: transparent;
    text-shadow: none !important;
}

/* =======================================================
   SELECTS NATIVOS
   A lista que abre ao clicar num <select> é desenhada pelo
   sistema operacional, não pelo CSS da página — por isso
   aparecia branca com texto preto no meio dos modais escuros.
   color-scheme avisa o navegador que a página é escura, e
   as regras em option cobrem Windows/Linux.
   ======================================================= */
select {
    color-scheme: dark;
}
select option {
    background-color: #0f172a;
    color: #e2e8f0;
}
select option:checked,
select option:hover {
    background-color: #10b981;
    color: #02150c;
}

/* =======================================================
   ABA NUTRIÇÃO
   Os cards antes dependiam de <script> inline chamando
   setProperty(..., 'important') para vencer as regras
   genéricas de .card. Agora é uma classe própria.
   ======================================================= */
.card-nutri {
    background: linear-gradient(180deg, #020617 0%, #2a0614 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.12) !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}
.nutri-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(236, 72, 153, 0.22);
    background: rgba(236, 72, 153, 0.06);
}
.nutri-head h3 {
    margin: 0; color: #f9a8d4; font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem; letter-spacing: 1.5px; font-weight: 900;
}
.nutri-chip {
    background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.4);
    color: #f9a8d4; font-family: 'Orbitron', sans-serif; font-size: 0.5rem;
    letter-spacing: 1px; padding: 5px 10px; border-radius: 99px; cursor: pointer;
    white-space: nowrap;
}
.nutri-lbl {
    display: block; font-family: 'Orbitron', sans-serif; font-size: 0.55rem;
    color: #94a3b8; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px;
}
.nutri-input {
    width: 100%; box-sizing: border-box;
    background: rgba(2, 6, 23, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border-radius: 10px; padding: 11px 12px; font-size: 0.8rem; outline: none;
    font-family: 'Orbitron', sans-serif;
}
.nutri-input:focus { border-color: #ec4899 !important; box-shadow: 0 0 12px rgba(236,72,153,0.25); }

.nutri-btn-agua {
    background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc; padding: 13px 4px; border-radius: 12px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 900;
    transition: transform .08s, background .2s;
}
.nutri-btn-agua span { display: block; font-size: 0.5rem; opacity: 0.7; font-weight: 400; margin-top: 2px; }
.nutri-btn-agua:active { transform: scale(0.95); background: rgba(56, 189, 248, 0.2); }

.nutri-btn-desfaz {
    width: 100%; margin-top: 8px; background: transparent;
    border: 1px dashed rgba(239, 68, 68, 0.35); color: #f87171;
    padding: 9px; border-radius: 10px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 0.55rem; letter-spacing: 1px;
}
.nutri-btn-acao {
    width: 100%; margin-top: 14px; border: 1px solid; padding: 13px;
    border-radius: 12px; cursor: pointer; font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem; font-weight: 900; letter-spacing: 1px;
    transition: transform .08s;
}
.nutri-btn-acao:active { transform: scale(0.98); }

.nutri-stat {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px; padding: 11px 6px; text-align: center;
}
.nutri-stat-val { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 900; line-height: 1; }
.nutri-stat-rot { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; color: #475569; letter-spacing: 1.5px; margin-top: 4px; }

/* =======================================================
   PROTOCOLO DIÁRIO — checklist rosa
   A .check-box antiga vivia num <style> dentro da seção da
   aba e sumiu junto com ela. Agora mora aqui.
   ======================================================= */
.nutri-check {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: rgba(2, 6, 23, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 13px !important;
    padding: 12px 13px !important;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    transition: background .2s, border-color .2s, transform .08s;
}
.nutri-check:active { transform: scale(0.985); }
.nutri-check:hover {
    border-color: rgba(236, 72, 153, 0.5) !important;
    background: rgba(236, 72, 153, 0.07) !important;
}
.nutri-check.marcado {
    background: linear-gradient(90deg, rgba(236,72,153,0.16), rgba(236,72,153,0.04)) !important;
    border-color: rgba(236, 72, 153, 0.55) !important;
}

.nutri-box {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    border-radius: 7px;
    flex-shrink: 0;
    border: 2px solid rgba(236, 72, 153, 0.45) !important;
    background: rgba(2, 6, 23, 0.6) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: transparent;
    transition: background .2s, border-color .2s, color .2s;
}
.nutri-check.marcado .nutri-box {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-color: #f9a8d4 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.nutri-check-txt {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: #cbd5e1 !important;
    transition: color .2s;
}
.nutri-check.marcado .nutri-check-txt {
    color: #fff !important;
    text-decoration: line-through;
    text-decoration-color: rgba(249, 168, 212, 0.5);
}

.nutri-remove {
    background: transparent !important;
    border: none !important;
    color: #475569 !important;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 2px;
    flex-shrink: 0;
    line-height: 1;
    width: auto !important;
    transition: color .2s;
}
.nutri-remove:hover { color: #f87171 !important; }

.nutri-add {
    width: 100% !important;
    margin-top: 4px;
    background: transparent !important;
    border: 1px dashed rgba(236, 72, 153, 0.45) !important;
    color: #f9a8d4 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.58rem !important;
    letter-spacing: 1.5px;
    transition: background .2s;
}
.nutri-add:hover { background: rgba(236, 72, 153, 0.08) !important; }

/* =======================================================
   ABA DIETA — cardápio (identidade CIANO)
   ======================================================= */
/* ── Cards da dieta ──────────────────────────────────────────────────────
   A cor vem de --tom, definida por refeição no JS (tomDaRefeicao). Antes tudo
   era ciano fixo e as refeições ficavam indistinguíveis ao rolar a tela.
   O verde não é usado como tom de nenhuma: é a cor de "já comi". */
.card-dieta {
    --tom: #06b6d4;
    --tom-rgb: 6, 182, 212;
    --comido: #22c55e;
    --comido-rgb: 34, 197, 94;

    background: linear-gradient(180deg, #020617 0%, rgba(var(--tom-rgb), 0.14) 100%) !important;
    border: 1px solid rgba(var(--tom-rgb), 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 20px rgba(var(--tom-rgb), 0.1) !important;
    margin-bottom: 12px;
    padding: 0 !important;
    overflow: hidden;
}
.dieta-head {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(var(--tom-rgb), 0.22);
    background: rgba(var(--tom-rgb), 0.10);
    /* Faixa lateral na cor da refeição — é o que se enxerga de longe */
    box-shadow: inset 4px 0 0 var(--tom);
}
.dieta-head h3 {
    flex: 1; min-width: 0; margin: 0;
    color: var(--tom); font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem; font-weight: 900; letter-spacing: 0.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dieta-contador {
    font-family: 'Orbitron', sans-serif; font-size: 0.55rem; font-weight: 900;
    color: var(--tom); background: rgba(var(--tom-rgb), 0.12);
    border: 1px solid rgba(var(--tom-rgb), 0.35);
    padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
/* Refeição toda concluída: o card inteiro assume o verde */
.card-dieta.tudo-comido {
    border-color: rgba(var(--comido-rgb), 0.55) !important;
    box-shadow: 0 0 20px rgba(var(--comido-rgb), 0.14) !important;
}
.card-dieta.tudo-comido .dieta-head {
    background: rgba(var(--comido-rgb), 0.12);
    box-shadow: inset 4px 0 0 var(--comido);
    border-bottom-color: rgba(var(--comido-rgb), 0.3);
}

.dieta-item {
    display: flex !important; align-items: center; gap: 11px;
    background: rgba(2, 6, 23, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 11px !important; padding: 10px 11px !important;
    margin-bottom: 7px; cursor: pointer; user-select: none;
    transition: background .2s, border-color .2s, transform .08s, box-shadow .2s;
}
.dieta-item:active { transform: scale(0.985); }
.dieta-item:hover {
    border-color: rgba(var(--tom-rgb), 0.45) !important;
    background: rgba(var(--tom-rgb), 0.06) !important;
}

/* ── JÁ COMI ──
   Verde e faixa à esquerda. É proposital não usar o tom da refeição: assim
   "o que já comi" se lê igual em todos os cards, seja o café ou o jantar. */
.dieta-item.marcado {
    background: linear-gradient(90deg, rgba(var(--comido-rgb), 0.20), rgba(var(--comido-rgb), 0.04)) !important;
    border-color: rgba(var(--comido-rgb), 0.55) !important;
    box-shadow: inset 4px 0 0 var(--comido);
}
.dieta-item.marcado:hover {
    background: linear-gradient(90deg, rgba(var(--comido-rgb), 0.26), rgba(var(--comido-rgb), 0.06)) !important;
    border-color: rgba(var(--comido-rgb), 0.7) !important;
}
.dieta-box {
    width: 20px !important; height: 20px !important; min-width: 20px;
    border-radius: 6px; flex-shrink: 0;
    border: 2px solid rgba(var(--tom-rgb), 0.45) !important;
    background: rgba(2, 6, 23, 0.6) !important;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 0.65rem; color: transparent;
    transition: background .2s, color .2s, transform .15s;
}
.dieta-item.marcado .dieta-box {
    background: linear-gradient(135deg, var(--comido), #16a34a) !important;
    border-color: #4ade80 !important; color: #04120a !important;
    box-shadow: 0 0 10px rgba(var(--comido-rgb), 0.6);
    transform: scale(1.06);
}
.dieta-item-txt { flex: 1; min-width: 0; font-size: 0.76rem; color: #cbd5e1; }
.dieta-item.marcado .dieta-item-txt {
    color: #86efac;
    text-decoration: line-through;
    text-decoration-color: rgba(var(--comido-rgb), 0.6);
}
.dieta-remove {
    background: transparent !important; border: none !important; color: #475569 !important;
    font-size: 0.78rem; cursor: pointer; padding: 4px; flex-shrink: 0;
    line-height: 1; width: auto !important; transition: color .2s;
}
.dieta-remove:hover { color: #f87171 !important; }
.dieta-add-item {
    width: 100% !important; margin-top: 4px;
    background: transparent !important; border: 1px dashed rgba(6, 182, 212, 0.35) !important;
    color: #06b6d4 !important; padding: 9px !important; border-radius: 10px !important;
    cursor: pointer; font-family: 'Orbitron', sans-serif !important;
    font-size: 0.52rem !important; letter-spacing: 1px;
}
.dieta-add-ref {
    width: 100% !important; margin-top: 6px;
    background: rgba(6, 182, 212, 0.1) !important;
    border: 1px solid rgba(6, 182, 212, 0.45) !important;
    color: #22d3ee !important; padding: 13px !important; border-radius: 13px !important;
    cursor: pointer; font-family: 'Orbitron', sans-serif !important;
    font-size: 0.62rem !important; font-weight: 900; letter-spacing: 1.5px;
}
.dieta-add-ref:hover { background: rgba(6, 182, 212, 0.18) !important; }

/* =======================================================
   ABA DIETA — identidade CIANO
   Cor nova: nenhuma outra aba usa. Verde é Treinos, vermelho
   é Ranking, rosa é Nutrição, dourado é Corpo, roxo é Criar.
   ======================================================= */
.tab-btn[data-cor="ciano"].active {
    border-color: #06b6d4;
    color: #22d3ee;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
}

.btn-neon-ciano {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1px solid #06b6d4;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 1px;
    padding: 10px 15px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
}
.btn-neon-ciano:hover {
    background: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
}

/* (o bloco que repintava estes cards foi removido: a definição base já nasce ciano) */

/* Ações do cardápio e kcal por alimento */
.dieta-acao {
    flex: 1 1 auto;
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #22d3ee !important;
    padding: 9px 6px !important; border-radius: 10px !important;
    cursor: pointer; white-space: nowrap;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.5rem !important; font-weight: 700; letter-spacing: 0.5px;
}
.dieta-acao:hover { background: rgba(6, 182, 212, 0.16) !important; }
.dieta-kcal {
    font-family: 'Orbitron', sans-serif; font-size: 0.5rem; font-weight: 900;
    color: #0891b2; background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 2px 7px; border-radius: 99px; white-space: nowrap; flex-shrink: 0;
}
.dieta-item.marcado .dieta-kcal { color: #4ade80; border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.12); }

/* Barra de ações da Dieta — 5 botões numa linha só */
.dieta-barra-acoes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    width: 100%;
}
.btn-dieta-mini {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(6, 182, 212, 0.35) !important;
    color: #22d3ee !important;
    padding: 8px 2px !important;
    border-radius: 10px !important;
    cursor: pointer; margin: 0 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.5rem !important;
    font-weight: 700; letter-spacing: 0.3px;
    line-height: 1.1; text-align: center;
    min-width: 0; overflow: hidden;
    transition: background .2s, transform .08s;
}
.btn-dieta-mini span { font-size: 0.85rem; line-height: 1; }
.btn-dieta-mini:active { transform: scale(0.95); }
.btn-dieta-mini:hover { background: rgba(6, 182, 212, 0.18) !important; }
.btn-dieta-mini.destaque {
    background: rgba(6, 182, 212, 0.22) !important;
    border-color: #06b6d4 !important;
}

/* Barra de matiz do seletor de temas */
#matizTema::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 3px solid rgba(0, 0, 0, 0.5);
    cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
#matizTema::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 3px solid rgba(0, 0, 0, 0.5);
    cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ── Seletor de sexo do perfil ──────────────────────────────────────────── */
/* Vive só na aba de perfil; alimenta o cálculo de calorias e o filtro do ranking. */
.btn-sexo-perfil {
    min-width: 0;
    height: 38px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid #334155;
    border-radius: 8px;
    color: #64748b;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    overflow: hidden;
}
.btn-sexo-perfil:hover { border-color: #475569; color: #94a3b8; }
.btn-sexo-perfil.ativo {
    background: rgba(245, 158, 11, 0.12);
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

/* ── Painéis de modal com fundo próprio ─────────────────────────────────── */
/* Marca um painel como "eu cuido do meu fundo". Ver a regra div[style*="#1e293b"]
   acima: sem esta classe, o fundo era substituído por uma cor semitransparente. */
.painel-solido {
    background-color: #0f172a !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
}

/* ── Resultado do duelo ─────────────────────────────────────────────────── */
@keyframes dueloEntrada {
    0%   { opacity: 0; transform: scale(0.86) translateY(18px); }
    60%  { opacity: 1; transform: scale(1.03) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dueloSelo {
    0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
    55%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
    75%  { transform: scale(0.92) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes dueloVs {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50%      { transform: scale(1.22); opacity: 1; }
}
@keyframes dueloNumero {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes dueloXP {
    0%   { opacity: 0; transform: scale(0.6); }
    70%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
.duelo-entrada { animation: dueloEntrada 0.45s cubic-bezier(.2,.9,.3,1.2) both; }
.duelo-selo    { animation: dueloSelo 0.7s cubic-bezier(.2,.9,.3,1.4) 0.1s both; }
.duelo-vs      { animation: dueloVs 1.6s ease-in-out infinite; }
.duelo-numero  { animation: dueloNumero 0.5s ease-out 0.35s both; }
.duelo-xp      { animation: dueloXP 0.55s cubic-bezier(.2,.9,.3,1.5) 0.6s both; }

/* Quem está na frente no duelo ativo pulsa de leve */
@keyframes dueloLiderando {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.duelo-liderando { animation: dueloLiderando 2s ease-in-out infinite; }

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    .duelo-entrada, .duelo-selo, .duelo-vs, .duelo-numero, .duelo-xp, .duelo-liderando {
        animation: none !important;
    }
}

/* Barra do aviso "salvando treino": vai e volta enquanto a gravação acontece.
   Sem isso o retângulo fica parado e parece travado. */
@keyframes salvandoBarra {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(150%); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    #avisoSalvandoTreino [style*="salvandoBarra"] { animation: none !important; width: 100% !important; }
}

/* Ponto vermelho do "treinando agora" no ranking. Pulsa devagar para chamar
   atenção sem virar pisca-pisca. */
@keyframes pulsoAoVivo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
    [style*="pulsoAoVivo"] { animation: none !important; }
}

/* =======================================================
   AGENDA — os dias entram em cascata
   Sem isto o mes trocava num piscar e nada indicava que a
   grade tinha sido redesenhada. O atraso de cada dia e
   definido no JS (animation-delay), so a curva mora aqui.
   ======================================================= */
@keyframes dia-agenda-entra {
    from { opacity: 0; transform: scale(0.82) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.dia-agenda {
    animation: dia-agenda-entra 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dia-agenda:active { transform: scale(0.9); }
@media (hover: hover) {
    .dia-agenda:hover { transform: translateY(-2px) scale(1.06); z-index: 2; }
}

/* O dia de hoje respira, para achar sozinho no meio do mes */
@keyframes hoje-respira {
    0%, 100% { box-shadow: inset 0 0 10px rgba(250,204,21,0.4), 0 0 0 0 rgba(250,204,21,0.45); }
    50%      { box-shadow: inset 0 0 10px rgba(250,204,21,0.4), 0 0 0 6px rgba(250,204,21,0); }
}
.dia-agenda.dia-hoje { animation: dia-agenda-entra 0.32s cubic-bezier(0.22,1,0.36,1) both,
                                  hoje-respira 2.4s ease-in-out 0.5s infinite; }

/* Os cartoes do dia entram um a um, na mesma linguagem da grade */
@keyframes card-dia-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-dia-agenda { animation: card-dia-entra 0.3s ease both; }

/* Quem prefere menos movimento nao ve nenhum. Sao animacoes decorativas:
   desligar nao tira informacao nenhuma da tela. */
@media (prefers-reduced-motion: reduce) {
    .dia-agenda, .dia-agenda.dia-hoje, .card-dia-agenda { animation: none; }
    .dia-agenda:hover { transform: none; }
}

}

/* =======================================================
   CABECALHO DO TOPO — duas linhas
   Linha 1: foto e nome, na largura inteira. Era o nome
   (que nao quebra linha) que empurrava os cards para fora.
   Linha 2: os 5 botoes a esquerda e os dois mini cards
   ocupando todo o resto — na MESMA linha dos botoes.

   Com !important de proposito: o lado a lado ja falhou por
   grid e por flex no atributo style, e regra de folha com
   !important vence estilo inline. Se um dia isto puder
   voltar para o inline, otimo — mas so depois de descobrir
   o que estava vencendo antes.
   ======================================================= */
.cabecalho-topo > .linha-acoes {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px;
}
/* Os botoes tem largura propria; os cards ficam com o resto */
.cabecalho-topo > .linha-acoes > div:first-child { flex: 0 0 auto !important; }
.cabecalho-topo > .linha-acoes > #cardConquistas {
    flex: 1 1 0 !important;
    min-width: 0;
}

/* ==========================================
   A BARRA DE ABAS E AS ZONAS DE GESTO

   A barra estava a 15px de todas as bordas. No iPhone, os ~34px de baixo
   sao a barra de inicio; no Android com navegacao por gestos, as bordas
   esquerda e direita sao o gesto de VOLTAR, em toda a altura da tela.
   Resultado: tocar na primeira ou na ultima aba disparava o gesto do
   sistema em vez do botao.

   Esta regra vem por ultimo de proposito: ha tres .tabs no arquivo, e
   quem chega depois ganha.
   ========================================== */
.tabs {
    /* O MAIOR dos dois, e nunca a soma: onde o sistema ja reserva espaco
       (a barra do iPhone), ele basta; onde nao reserva, a folga e nossa.
       Somar os dois fez a barra crescer 32px e subir os botoes. */
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left:   max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right:  max(18px, env(safe-area-inset-right, 0px)) !important;
    padding-top: 10px !important;

    /* A barra rola de lado com sete abas. Sem isto, a primeira e a ultima
       param coladas na borda ao chegar ao fim da rolagem. */
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
}

/* Alvo de toque: 44px e o minimo que um dedo acha sem erro. */
.tab-btn {
    min-height: 46px !important;
}

/* O conteudo precisa terminar acima da barra, que agora e mais alta. */
#appContent {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

/* E o mesmo recuo nas folhas que sobem do rodape: o botao de acao delas
   caia exatamente na barra de gestos. */
.aviso-caixa, .painel-solido {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* ==========================================
   O TOPO, DEBAIXO DO RELOGIO

   viewport-fit=cover manda a pagina ocupar a tela inteira — inclusive o
   pedaco embaixo do relogio e das notificacoes. Sem devolver esse espaco,
   o cabecalho fica por baixo da barra de status.

   O mesmo vale de lado, com o celular deitado e o furo da camera.
   ========================================== */
body {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(15px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(15px, env(safe-area-inset-right, 0px)) !important;
}

/* A tela de login tambem comeca no alto. */
#loginScreen {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ==========================================
   A FAIXA DE AVISOS DO TOPO DOS TREINOS

   Um recado ocupa a linha toda, dois ficam meio a meio, quatro ficam com um
   quarto cada. A divisao e do pai: o cartao nao precisa saber quantos irmaos
   tem para ocupar a fatia dele — e por isso a mesma marcacao serve solta,
   fora da faixa, ocupando a largura inteira.
   ========================================== */
.faixa-avisos > button {
    flex: 1 1 0;
    min-width: 0;
}