/* ==================================================================
   IDENTIDADE VISUAL — Academia Corpo em Movimento (FICTÍCIA)

   Um lugar só pra cor, fonte e espaçamento. Trocar aqui muda o app inteiro.

   ⭐ COMO FUNCIONA O MODO CLARO/ESCURO:
   - O padrão abaixo (:root) é o modo CLARO.
   - Se o celular está no escuro, o bloco @media troca os valores.
   - Se a pessoa escolheu na mão (Perfil > Aparência), o [data-tema] manda.
   As telas nunca escrevem cor: elas usam var(--carta), var(--txt)...
   ================================================================== */

:root{
  /* ---------- Marca (não muda entre claro e escuro) ---------- */
  --marca-lima:      #C6F24E;   /* ação principal: reservar, check-in */
  --marca-lima-esc:  #A8D62E;
  --marca-coral:     #FF6B4A;   /* fogo, alerta, evasão */
  --marca-azul:      #4EA8FF;
  --marca-roxo:      #A78BFA;
  --marca-ouro:      #FFC24B;
  --sobre-lima:      #10160A;   /* texto que vai EM CIMA do lima */
  --sobre-coral:     #2A0D05;   /* texto que vai EM CIMA do coral */

  /* ---------- Superfícies — MODO CLARO ---------- */
  --fundo:   #F2F4F7;
  --carta:   #FFFFFF;
  --carta2:  #E9EDF2;
  --borda:   #DCE2EA;
  --txt:     #10141B;
  --txt2:    #5A6472;
  --preto-suave: #E4E9EF;              /* caixas "vazias": câmera, vídeo */
  --menu-fundo:  rgba(255,255,255,.94);
  --corpo-fundo: radial-gradient(1100px 560px at 50% -10%, #FFFFFF 0%, #E7EBF1 62%);
  --aparelho-borda: #D3DAE3;
  --aparelho-sombra: 0 24px 70px rgba(20,30,50,.16);

  /* ---------- Cor de marca usada como TEXTO ----------
     Lima puro sobre branco é ilegível. Cada modo tem a sua versão. */
  --lima-txt:  #446409;
  --ouro-txt:  #8A6100;
  --coral-txt: #C4401B;
  --azul-txt:  #1A63B8;
  --roxo-txt:  #6642C6;

  /* ---------- Cartas coloridas de destaque ---------- */
  --tint-verde:  linear-gradient(135deg,#EEF8DC,#F8FCEF);
  --tint-verde-borda: #CBE199;
  --tint-fogo:   linear-gradient(135deg,#FFEDE6,#FFF7F3);
  --tint-fogo-borda:  #FFC7B2;
  --tint-ouro:   linear-gradient(135deg,#FFF6DF,#FFFCF2);
  --tint-ouro-borda:  #EFD293;
  --tint-azul:   linear-gradient(135deg,#E9F2FD,#F6FAFF);
  --tint-azul-borda:  #C2DAF6;
  --tint-roxo:   linear-gradient(135deg,#F2EDFE,#F9F6FF);
  --tint-roxo-borda:  #D8CDF7;
  --tint-frase:  linear-gradient(135deg,#F1F8E1,#FAFDF4);
  --tint-frase-borda: #CFE3A4;
  --tint-frase-txt:   #3D520E;
  --tint-vazio:  linear-gradient(160deg,#EDF0F5,#F7F9FB);

  /* ---------- Etiquetas ---------- */
  --tag-ok-bg:     #E8F6CE;  --tag-ok-txt:     #3E5D07;
  --tag-cheia-bg:  #FFE3DA;  --tag-cheia-txt:  #B23A16;
  --tag-espera-bg: #FFF0D2;  --tag-espera-txt: #8A6100;
  --tag-info-bg:   #E1EEFE;  --tag-info-txt:   #17569F;

  /* ---------- Aviso de protótipo ---------- */
  --proto-bg: #FFF8E6;  --proto-borda: #EED08A;  --proto-txt: #7A5A05;

  /* ---------- Formas ---------- */
  --r-p: 10px; --r-m: 16px; --r-g: 22px; --r-max: 999px;
  --sombra: 0 4px 16px rgba(10,14,22,.08);
  --sombra-g: 0 12px 40px rgba(10,14,22,.14);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Painel da academia — MODO CLARO ----------
     Usa o MESMO sistema do app do aluno, então ganha o modo escuro junto. */
  --cl-fundo: #F5F6F8; --cl-carta: #FFFFFF; --cl-borda: #E3E6EB;
  --cl-txt: #12151C;   --cl-txt2: #667085;
  --cl-carta2: #F8FAFC;          /* caixinhas dentro da carta */
  --cl-linha:  #F0F2F5;          /* risquinho entre linhas da tabela */
  --cl-hover:  #FAFBFC;

  /* menu lateral (escuro de propósito, nos dois modos — é a identidade) */
  --lat-bg:    #12151C; --lat-txt:  #E8EBF0; --lat-txt2: #AEB6C4;
  --lat-hover: #1C212B; --lat-borda:#232936; --lat-grupo:#9AA3B5;

  /* botões do painel */
  --btn-forte-bg: #12151C; --btn-forte-txt: #FFFFFF;

  /* etiquetas do painel */
  --e-ok-bg:#EAF7D9; --e-ok-txt:#4F7A0A;
  --e-al-bg:#FFF2DC; --e-al-txt:#8A6100;
  --e-ri-bg:#FFE8E2; --e-ri-txt:#B03516;
  --e-in-bg:#E4F0FF; --e-in-txt:#175CA8;
  --e-nu-bg:#F0F1F4; --e-nu-txt:#5A6472;

  /* faixas de aviso */
  --fx-risco-bg:#FFF1EC; --fx-risco-bd:#FFD6C9; --fx-risco-tx:#8C2C0E;
  --fx-proto-bg:#FFF8E8; --fx-proto-bd:#F0C86A; --fx-proto-tx:#7A5A05;
  --fx-info-bg: #EDF5FF; --fx-info-bd: #D3E4FB; --fx-info-tx: #1B4F8F;
  --cx-risco-bg: linear-gradient(135deg,#FFF3EF,#FFFAF8); --cx-risco-bd:#FFD0BF;
  --barra-vazia:#F0F2F5; --barra-fraca:#FFB49A;
}

/* ===== ESCURO: quando o celular está no escuro ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:   #0E1014;
    --carta:   #171A21;
    --carta2:  #1F232C;
    --borda:   #2A2F3A;
    --txt:     #F3F5F8;
    --txt2:    #99A1B0;
    --preto-suave: #0A0C10;
    --menu-fundo:  rgba(15,18,24,.94);
    --corpo-fundo: radial-gradient(1200px 600px at 50% -10%, #16202B 0%, #05070A 60%);
    --aparelho-borda: #232936;
    --aparelho-sombra: 0 30px 90px rgba(0,0,0,.6);

    --lima-txt:  #C6F24E;
    --ouro-txt:  #FFC24B;
    --coral-txt: #FF6B4A;
    --azul-txt:  #4EA8FF;
    --roxo-txt:  #A78BFA;

    --tint-verde:  linear-gradient(135deg,#1C2411,#171A21);
    --tint-verde-borda: #3B4A1E;
    --tint-fogo:   linear-gradient(135deg,#2A1508,#1A1208);
    --tint-fogo-borda:  #3A2410;
    --tint-ouro:   linear-gradient(135deg,#2A2412,#171A21);
    --tint-ouro-borda:  #4A3D14;
    --tint-azul:   linear-gradient(135deg,#151E2B,#111722);
    --tint-azul-borda:  #233246;
    --tint-roxo:   linear-gradient(135deg,#1A1428,#141020);
    --tint-roxo-borda:  #2E2447;
    --tint-frase:  linear-gradient(135deg,#1B2410,#141A0C);
    --tint-frase-borda: #2C3A18;
    --tint-frase-txt:   #DCEBBF;
    --tint-vazio:  linear-gradient(160deg,#1E2430,#151A23);

    --tag-ok-bg:     rgba(198,242,78,.16); --tag-ok-txt:     #C6F24E;
    --tag-cheia-bg:  rgba(255,107,74,.16); --tag-cheia-txt:  #FF6B4A;
    --tag-espera-bg: rgba(255,194,75,.16); --tag-espera-txt: #FFC24B;
    --tag-info-bg:   rgba(78,168,255,.16); --tag-info-txt:   #4EA8FF;

    --proto-bg: rgba(255,194,75,.10); --proto-borda: rgba(255,194,75,.40); --proto-txt: #FFC24B;

    --sombra:   0 4px 16px rgba(0,0,0,.35);
    --sombra-g: 0 12px 40px rgba(0,0,0,.5);

    /* --- painel no escuro --- */
    --cl-fundo:#0E1014; --cl-carta:#171A21; --cl-borda:#2A2F3A;
    --cl-txt:#F3F5F8;   --cl-txt2:#99A1B0;
    --cl-carta2:#1F232C; --cl-linha:#252A34; --cl-hover:#1C202A;
    --lat-bg:#14171E; --lat-txt:#E8EBF0; --lat-txt2:#99A1B0;
    --lat-hover:#1F242F; --lat-borda:#262C38; --lat-grupo:#9AA3B5;
    --btn-forte-bg:#2A303C; --btn-forte-txt:#F3F5F8;
    --e-ok-bg:rgba(198,242,78,.16); --e-ok-txt:#C6F24E;
    --e-al-bg:rgba(255,194,75,.16); --e-al-txt:#FFC24B;
    --e-ri-bg:rgba(255,107,74,.16); --e-ri-txt:#FF8A6E;
    --e-in-bg:rgba(78,168,255,.16); --e-in-txt:#7DC0FF;
    --e-nu-bg:rgba(255,255,255,.07); --e-nu-txt:#99A1B0;
    --fx-risco-bg:rgba(255,107,74,.10); --fx-risco-bd:rgba(255,107,74,.32); --fx-risco-tx:#FFA88F;
    --fx-proto-bg:rgba(255,194,75,.10); --fx-proto-bd:rgba(255,194,75,.38); --fx-proto-tx:#FFC24B;
    --fx-info-bg: rgba(78,168,255,.10); --fx-info-bd: rgba(78,168,255,.30); --fx-info-tx:#8CC7FF;
    --cx-risco-bg: linear-gradient(135deg,#241410,#1A1418); --cx-risco-bd:#4A2519;
    --barra-vazia:#252A34; --barra-fraca:#8A3F28;
  }
}

/* ===== ESCURO: quando a pessoa escolheu na mão ===== */
:root[data-tema="escuro"]{
  --fundo:#0E1014; --carta:#171A21; --carta2:#1F232C; --borda:#2A2F3A;
  --txt:#F3F5F8; --txt2:#99A1B0; --preto-suave:#0A0C10;
  --menu-fundo:rgba(15,18,24,.94);
  --corpo-fundo: radial-gradient(1200px 600px at 50% -10%, #16202B 0%, #05070A 60%);
  --aparelho-borda:#232936; --aparelho-sombra:0 30px 90px rgba(0,0,0,.6);
  --lima-txt:#C6F24E; --ouro-txt:#FFC24B; --coral-txt:#FF6B4A; --azul-txt:#4EA8FF; --roxo-txt:#A78BFA;
  --tint-verde:linear-gradient(135deg,#1C2411,#171A21); --tint-verde-borda:#3B4A1E;
  --tint-fogo:linear-gradient(135deg,#2A1508,#1A1208);  --tint-fogo-borda:#3A2410;
  --tint-ouro:linear-gradient(135deg,#2A2412,#171A21);  --tint-ouro-borda:#4A3D14;
  --tint-azul:linear-gradient(135deg,#151E2B,#111722);  --tint-azul-borda:#233246;
  --tint-roxo:linear-gradient(135deg,#1A1428,#141020);  --tint-roxo-borda:#2E2447;
  --tint-frase:linear-gradient(135deg,#1B2410,#141A0C); --tint-frase-borda:#2C3A18; --tint-frase-txt:#DCEBBF;
  --tint-vazio:linear-gradient(160deg,#1E2430,#151A23);
  --tag-ok-bg:rgba(198,242,78,.16);    --tag-ok-txt:#C6F24E;
  --tag-cheia-bg:rgba(255,107,74,.16); --tag-cheia-txt:#FF6B4A;
  --tag-espera-bg:rgba(255,194,75,.16);--tag-espera-txt:#FFC24B;
  --tag-info-bg:rgba(78,168,255,.16);  --tag-info-txt:#4EA8FF;
  --proto-bg:rgba(255,194,75,.10); --proto-borda:rgba(255,194,75,.40); --proto-txt:#FFC24B;
  --sombra:0 4px 16px rgba(0,0,0,.35); --sombra-g:0 12px 40px rgba(0,0,0,.5);

    /* --- painel no escuro --- */
    --cl-fundo:#0E1014; --cl-carta:#171A21; --cl-borda:#2A2F3A;
    --cl-txt:#F3F5F8;   --cl-txt2:#99A1B0;
    --cl-carta2:#1F232C; --cl-linha:#252A34; --cl-hover:#1C202A;
    --lat-bg:#14171E; --lat-txt:#E8EBF0; --lat-txt2:#99A1B0;
    --lat-hover:#1F242F; --lat-borda:#262C38; --lat-grupo:#9AA3B5;
    --btn-forte-bg:#2A303C; --btn-forte-txt:#F3F5F8;
    --e-ok-bg:rgba(198,242,78,.16); --e-ok-txt:#C6F24E;
    --e-al-bg:rgba(255,194,75,.16); --e-al-txt:#FFC24B;
    --e-ri-bg:rgba(255,107,74,.16); --e-ri-txt:#FF8A6E;
    --e-in-bg:rgba(78,168,255,.16); --e-in-txt:#7DC0FF;
    --e-nu-bg:rgba(255,255,255,.07); --e-nu-txt:#99A1B0;
    --fx-risco-bg:rgba(255,107,74,.10); --fx-risco-bd:rgba(255,107,74,.32); --fx-risco-tx:#FFA88F;
    --fx-proto-bg:rgba(255,194,75,.10); --fx-proto-bd:rgba(255,194,75,.38); --fx-proto-tx:#FFC24B;
    --fx-info-bg: rgba(78,168,255,.10); --fx-info-bd: rgba(78,168,255,.30); --fx-info-tx:#8CC7FF;
    --cx-risco-bg: linear-gradient(135deg,#241410,#1A1418); --cx-risco-bd:#4A2519;
    --barra-vazia:#252A34; --barra-fraca:#8A3F28;
}

/* ===== CLARO na mão (mesmo com o celular no escuro) ===== */
:root[data-tema="claro"]{ color-scheme: light; }
:root[data-tema="escuro"]{ color-scheme: dark; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--fonte);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0}
.logo-mark{width:1em;height:1em;display:inline-block;vertical-align:-.12em}