/* Paleta de FreshCode para los tokens --gui-* (consumidos por GUI.Web.Razor, ver
   gui-web-blazor.css) y --fc-* (propios de este sitio). Mismos valores que
   Mobile/User/Resources/Styles/Colors.xaml, ButtonsTokens.xaml y SnackbarsTokens.xaml, para que
   la version web se parezca lo mas posible a la app movil. Los tokens de cada componente de GUI
   (botones, campos, etiquetas) estan en gui-tokens.css.

   MAUI escribe los colores con transparencia como #AARRGGBB y CSS como #RRGGBBAA: por eso aqui van
   en rgba() (#6633CCBD de MAUI es menta al 40%; copiado tal cual, CSS lo pinta morado).

   data-theme puede ser "light", "dark" o "system" (ThemeProvider.Mode por defecto): cuando es
   "system", el tema real lo decide prefers-color-scheme, igual que AppThemeBinding en MAUI. */

.gui-theme[data-theme="light"],
.gui-theme[data-theme="system"] {
    --gui-primary: #267263;
    --gui-accent: #33CCBD;
    --gui-secondary: #DFD8F7;
    --gui-danger: #E5484D;
    --gui-success: #2ECC71;
    --gui-warning: #F5A623;

    --gui-surface: #FFFFFF;
    --gui-surface-alt: #EAF9F7;
    --gui-text: #031416;
    --gui-muted: #267263;
    --gui-border: rgba(51, 204, 189, .40);
    --gui-focus: #33CCBD;

    --fc-surface: #EAF9F7;
    --fc-card: #FFFFFF;
    --fc-ink: #031416;
    --fc-deep: #062329;
    --fc-green: #267263;
    --fc-mint: #33CCBD;
    --fc-muted: #267263;
    --fc-border: rgba(51, 204, 189, .40);
    /* Empty profile picture, as ProfileImageRegisterLight/Dark on mobile. */
    --fc-profile-placeholder: url("../images/profile_color_register.png");
    /* Bottom tab bar: FreshGreen/Gray400 light, FreshMint/Gray300 dark (MainShellPage). */
    --fc-tab-selected: #267263;
    --fc-tab-unselected: #919191;
    /* Top bar: LightNavigationBarColor/DarkNavigationBarColor, title FreshInk/White (MAUI Shell style). */
    --fc-nav-bg: #EAF9F7;
    --fc-nav-text: #031416;
}

.gui-theme[data-theme="dark"] {
    --gui-primary: #267263;
    --gui-accent: #33CCBD;
    --gui-secondary: #DFD8F7;
    --gui-danger: #8C1F23;
    --gui-success: #1F7A45;
    --gui-warning: #8C5B00;

    --gui-surface: #062329;
    --gui-surface-alt: #031416;
    --gui-text: #FFFFFF;
    --gui-muted: #33CCBD;
    --gui-border: rgba(38, 114, 99, .60);
    --gui-focus: #33CCBD;

    --fc-surface: #031416;
    --fc-card: #062329;
    --fc-ink: #FFFFFF;
    --fc-deep: #062329;
    --fc-green: #267263;
    --fc-mint: #33CCBD;
    --fc-muted: #33CCBD;
    --fc-border: rgba(38, 114, 99, .60);
    --fc-profile-placeholder: url("../images/profile_white_register.png");
    --fc-tab-selected: #33CCBD;
    --fc-tab-unselected: #ACACAC;
    --fc-nav-bg: #031416;
    --fc-nav-text: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    .gui-theme[data-theme="system"] {
        --gui-primary: #267263;
        --gui-accent: #33CCBD;
        --gui-secondary: #DFD8F7;
        --gui-danger: #8C1F23;
        --gui-success: #1F7A45;
        --gui-warning: #8C5B00;

        --gui-surface: #062329;
        --gui-surface-alt: #031416;
        --gui-text: #FFFFFF;
        --gui-muted: #33CCBD;
        --gui-border: rgba(38, 114, 99, .60);
        --gui-focus: #33CCBD;

        --fc-surface: #031416;
        --fc-card: #062329;
        --fc-ink: #FFFFFF;
        --fc-deep: #062329;
        --fc-green: #267263;
        --fc-mint: #33CCBD;
        --fc-muted: #33CCBD;
        --fc-border: rgba(38, 114, 99, .60);
        --fc-profile-placeholder: url("../images/profile_white_register.png");
        --fc-tab-selected: #33CCBD;
        --fc-tab-unselected: #ACACAC;
        --fc-nav-bg: #031416;
        --fc-nav-text: #FFFFFF;
    }
}

/* Without this the browser's default 8px body margin shows as a white frame around the themed app. */
html,
body {
    margin: 0;
}

.gui-theme {
    --gui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gui-radius: 14px;
    --gui-shadow: 0 .5rem 1.5rem rgba(3, 20, 22, .08);
    --gui-animation-duration: 180ms;
    background: var(--gui-surface);
    min-height: 100dvh;
}