/* ============================================================= */
/* sportclima — styles.css                                        */
/* estilos base + dark mode oled + aba "sobre o projeto"          */
/* ============================================================= */


/* ----------------------------------------------------------- */
/* variáveis de cor — light e dark                             */
/* ----------------------------------------------------------- */
:root {
    --primary:          #f27f0d;
    --bg-light:         #f8f7f5;
    --bg-dark:          #0a0a0a;
    --surface-1:        #121212;
    --surface-2:        #1c1c1c;
    --surface-3:        #252525;
    --text-primary:     #0f172a;
    --text-secondary:   #64748b;
    --text-dark:        #f1f5f9;
    --text-dark-muted:  #71717a;
    --border-light:     rgba(242, 127, 13, 0.12);
    --border-dark:      rgba(242, 127, 13, 0.06);
}


/* ----------------------------------------------------------- */
/* base global: fonte e transições suaves de tema              */
/* ----------------------------------------------------------- */
body {
    font-family: 'Lexend', sans-serif;
}

/* transição global para mudanças de cor ao alternar o tema */
*, *::before, *::after {
    transition: background-color 0.25s ease, color 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* material symbols: configuração padrão */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* variante preenchida para ícones de destaque */
.filled {
    font-variation-settings: 'FILL' 1;
}


/* ----------------------------------------------------------- */
/* botões da spa — sidebar de esportes                         */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* botões da spa — sidebar de esportes                         */
/* ----------------------------------------------------------- */
.sport-btn,
.sport-btn-sidebar {
    transition: 0.25s all ease;
    cursor: pointer;
}

/* estado ativo: fundo laranja + texto e ícone brancos */
.sport-btn-sidebar.sidebar-active {
    background-color: #f97316 !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.2);
}

.sport-btn-sidebar.sidebar-active .material-symbols-outlined {
    color: white !important;
    font-variation-settings: 'FILL' 1;
}

.sport-btn-sidebar.sidebar-active p {
    color: white !important;
    font-weight: 600;
}

/* estado inativo: texto cinza padrão (tema claro e escuro) */
.sport-btn-sidebar:not(.sidebar-active) {
    background-color: transparent !important;
    color: #64748b;  /* slate-500 */
}

.dark .sport-btn-sidebar:not(.sidebar-active) {
    color: #94a3b8;  /* slate-400 */
}

.sport-btn-sidebar:not(.sidebar-active) .material-symbols-outlined {
    color: inherit !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sport-btn-sidebar:not(.sidebar-active) p {
    color: inherit !important;
    font-weight: 500;
}


/* ----------------------------------------------------------- */
/* botão "sobre o projeto" — estado ativo                      */
/* ----------------------------------------------------------- */
.sobre-btn {
    transition: 0.25s all ease;
    cursor: pointer;
}

/* destaque laranja quando a aba está aberta */
.sobre-btn-active {
    background-color: #f97316 !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
}

.sobre-btn-active .material-symbols-outlined {
    color: white !important;
    font-variation-settings: 'FILL' 1;
}

.sobre-btn-active p {
    color: white !important;
    font-weight: 600;
}


/* ----------------------------------------------------------- */
/* hero da spa: imagem de fundo com texto sobreposto           */
/* ----------------------------------------------------------- */
.spa-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    min-height: 300px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.spa-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
}

.spa-hero:hover .spa-hero-bg {
    transform: scale(1.05);
}

.spa-hero-content {
    position: relative;
    z-index: 10;
    color: white;
    max-width: 600px;
}


/* ----------------------------------------------------------- */
/* cartões de métricas climáticas                             */
/* ----------------------------------------------------------- */
.metric-card {
    background: white;
    border: 1px solid rgba(242, 127, 13, 0.2);
    border-radius: 1rem;
    padding: 20px;
    transition: box-shadow .25s ease;
}

.metric-card:hover {
    box-shadow: 0 4px 12px rgba(242, 127, 13, 0.15);
}

.dark .metric-card {
    background: var(--surface-2);
    border-color: rgba(242, 127, 13, 0.12);
}

.dark .metric-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 127, 13, 0.15);
}


/* ----------------------------------------------------------- */
/* gráfico de variação horária                                 */
/* ----------------------------------------------------------- */
.chart-container {
    background: white;
    border-radius: 1rem;
    border: 1px solid rgba(242, 127, 13, 0.15);
    padding: 24px;
}

.dark .chart-container {
    background: var(--surface-2);
    border-color: rgba(242, 127, 13, 0.1);
}

.chart-bar {
    height: 120px;
    width: 20px;
    border-radius: 8px;
    background: linear-gradient(to top, #f27f0d, #ffb266);
    display: inline-block;
    margin: 0 6px;
}

.dark .chart-bar {
    background: linear-gradient(to top, #f27f0d, #ffcc99);
    box-shadow: 0 0 8px rgba(242, 127, 13, 0.3);
}


/* ----------------------------------------------------------- */
/* caixas de mapa com ping animado                             */
/* ----------------------------------------------------------- */
.map-box {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(242, 127, 13, 0.25);
}

.map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(242, 127, 13, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-ping {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #f27f0d;
    border: 2px solid white;
    animation: pingAnim 1.2s infinite;
}

@keyframes pingAnim {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}


/* ----------------------------------------------------------- */
/* card da sidebar direita com horários ideais                 */
/* ----------------------------------------------------------- */
.spa-sidebar-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid rgba(242, 127, 13, 0.2);
    padding: 20px;
}

.spa-sidebar-card h3 {
    font-weight: 700;
    margin-bottom: 12px;
}

.dark .spa-sidebar-card {
    background: var(--surface-2);
    border-color: rgba(242, 127, 13, 0.12);
}


/* ----------------------------------------------------------- */
/* campo de busca — foco com borda laranja                     */
/* ----------------------------------------------------------- */
input.form-input:focus {
    outline: none;
    border: 1px solid #f27f0d;
    background-color: white;
}

.dark input.form-input:focus {
    background-color: var(--surface-2);
    border-color: #f27f0d;
}


/* ----------------------------------------------------------- */
/* painel de notificações — scrollbar invisível                */
/* ----------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* ----------------------------------------------------------- */
/* animação de entrada do menu de perfil                       */
/* ----------------------------------------------------------- */
@keyframes profileFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0);     }
}

#profileMenu {
    z-index: 9999;
}

#profileMenu.active {
    display: block !important;
}


/* ----------------------------------------------------------- */
/* aba "sobre o projeto" — card das criadoras                  */
/* ----------------------------------------------------------- */

/* animação de entrada suave dos cards */
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.sobre-creator-card {
    animation: cardFadeIn 0.4s ease both;
}

/* delay escalonado para os três cards */
.sobre-creator-card:nth-child(1) { animation-delay: 0.05s; }
.sobre-creator-card:nth-child(2) { animation-delay: 0.15s; }
.sobre-creator-card:nth-child(3) { animation-delay: 0.25s; }

/* placeholder da foto: anel laranja pulsante */
.sobre-foto-placeholder {
    position: relative;
}

.sobre-foto-placeholder::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 2px dashed rgba(242, 127, 13, 0.3);
    animation: rotateDash 12s linear infinite;
}

@keyframes rotateDash {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* remove a animação do anel quando há foto real */
.sobre-foto-placeholder:has(img)::after {
    display: none;
}


/* ----------------------------------------------------------- */
/* dark mode — overrides globais para o esquema oled           */
/* ----------------------------------------------------------- */

/* fundo principal totalmente preto */
.dark body {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}

/* superfícies elevadas usam cinza escuro, não preto puro */
.dark .bg-white {
    background-color: var(--surface-1) !important;
}

/* textos secundários com opacidade adequada no escuro */
.dark .text-slate-600 { color: #a1a1aa !important; }
.dark .text-slate-500 { color: #71717a !important; }
.dark .text-slate-400 { color: #52525b !important; }

/* bordas sutis no modo escuro */
.dark .border-slate-100 { border-color: var(--surface-3) !important; }
.dark .border-stone-100 { border-color: var(--surface-3) !important; }

/* blocos com fundo stone ou orange no escuro */
.dark .bg-stone-50\/50   { background-color: var(--surface-2) !important; }
.dark .bg-orange-50\/30  { background-color: rgba(242, 127, 13, 0.04) !important; }

/* hover em listas e menus no modo escuro */
.dark .hover\:bg-slate-50:hover  { background-color: var(--surface-2) !important; }
.dark .hover\:bg-orange-50:hover { background-color: rgba(242, 127, 13, 0.08) !important; }

/* badge de notificação: animação de pop ao aparecer */
#notifBadge {
    animation: badgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* ----------------------------------------------------------- */
/* modais: alerta de segurança e feedback                      */
/* ----------------------------------------------------------- */

/* overlay oculto por padrão via classe hidden do Tailwind     */
/* .modal-open remove o hidden e exibe com animação            */
.modal-overlay.modal-open {
    display: flex !important;
}

/* animação de entrada do card */
@keyframes modalCardIn {
    from { opacity: 0; transform: scale(0.93) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.modal-overlay.modal-open .modal-card {
    animation: modalCardIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* animação de entrada do overlay */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-overlay.modal-open {
    animation: modalOverlayIn 0.2s ease both;
}

/* cards de métrica dentro do modal de alerta */
.alerta-metric-card {
    transition: box-shadow 0.2s ease;
}

.alerta-metric-card:hover {
    box-shadow: 0 2px 10px rgba(242, 127, 13, 0.12);
}

.dark .alerta-metric-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* impede scroll do body enquanto modal está aberto */
body.modal-lock {
    overflow: hidden;
}

.chart-tab-btn {
    background: transparent;
    color: var(--color-slate-500, #64748b);
    border: 1px solid transparent;
}
.active-chart-tab {
    background-color: var(--color-primary, #f97316);
    color: white;
    border-color: transparent;
}