:root {
    /* area segura */
    --safe-area-top: env(safe-area-inset-top);
    /* valor por defecto de efecto y transiciones */
    --theme-transition-duration: 1s;
    --fade-duration: 1s;
    /* Tiempo de barrido para evitar la sensación de pausa de animación en Logo en pantalla Home */
    --logo-wash-duration: 980ms;
    /* Dimensiones base del contenedor principal y tamaño de logos para bloque de selección */
    --content-logo-width: min(480px, 78vw);
    --content-logo-height: 100px;
    --program-logo-width: min(220px, 56vw);
    --program-logo-height: 90px;
    /* variables de las imagenes de los programas */
    --bg-karwash: url('/_content/OGD_FE_KW.Shared/images/background/karWash-fondo.png');
    --bg-amigofiel: url('/_content/OGD_FE_KW.Shared/images/background/amigoFiel-fondo.png');
    --bg-taxigana: url('/_content/OGD_FE_KW.Shared/images/background/taxiGana-fondo.png');
    --bg-membresia: url('/_content/OGD_FE_KW.Shared/images/background/membresia-fondo.png');
    /* capas usadas por el cross-fade */
    --bg-image-current: var(--bg-karwash);
    --bg-image-next: none;
    /* logo activo por defecto; el selector [data-theme] lo sobrescribe */
    --program-logo-image: var(--logo-karwash);
    /* variables de logos de los programas */
    --logo-karwash: url('/_content/OGD_FE_KW.Shared/images/logos/logo_kw_white.png');
    --logo-amigofiel: url('/_content/OGD_FE_KW.Shared/images/logos/logo_af_black.png');
    --logo-taxigana: url('/_content/OGD_FE_KW.Shared/images/logos/logo_tg.png');
    --logo-membresia: url('/_content/OGD_FE_KW.Shared/images/logos/logo_ms_white.png');
    /* variables de la paleta de colores de cada programa */
    /* --KarWAsh-- */
    --kw-primero: #DF6A2E; /* NARANJA */
    --kw-segundo: #D64123; /* ROJO */
    --kw-tercero: #F5CE3E; /* AMARILLO */
    --kw-cuarto: #021D49; /* AZUL OSCURO */
    --kw-quinto: #54C0E8; /* AZUL CLARO */
    /* --AmigoFiel-- */
    --af-primero: #DF6A2E; /* NARANJA */
    --af-segundo: #D64123; /* ROJO */
    --af-tercero: #F5CE3E; /* AMARILLO */
    --af-cuarto: #021D49; /* AZUL OSCURO */
    --af-quinto: #3F3F3E; /* GRIS OSCURO */
    /*--af-quinto: #1F140F;*/ /* MARRÓN OSCURO */
    /* --TaxiGana-- */
    --tg-primero: #FFC629; /* AMARILLO */
    --tg-segundo: #3D1152; /* MORADO OSCURO */
    --tg-tercero: #C017A2; /* MORADO CLARO */
    --tg-cuarto: #6B0397; /* MORADO MEDIO */
    --tg-quinto: #59CFFF; /* AZUL CLARO */
    /* --Membresia-- */
    --ms-primero: #ff6f00; /* NARANJA OSCURO */
    --ms-segundo: #D64123; /* ROJO */
    --ms-tercero: #1565C0; /* AZUL */
    --ms-cuarto: #ffb74d; /* AMARILLO */
    --ms-quinto: #fff0e0; /* BLANCO */
    /* Variables por defecto del tema */
    --primary-color: var(--kw-segundo);
    --secondary-color: var(--kw-cuarto);
    --tertiary-color: var(--kw-tercero);
    --accent-color: var(--kw-quinto);
    --bg-color: var(--kw-primero);
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #54C0E8 100%);
    --text-color-dark: #222222;
    --text-color-light: #ffffff;
    /* textos */
    --common-text-color-dark: #000; /* NEGRO */
    --common-text-color-light: #FFF; /* BLANCO */
    --common-text-color-gray: #c1c1c1; /* GRIS */
    --common-text-color-light-gray: #666; /* GRIS CLARO */
    --common-text-color-middle-gray: #888; /* GRIS MEDIO */
    --common-text-color-muted: #6c757d; /* GRIS OSCURO */
    --common-text-color-link: #006bb7; /* AZUL MEDIO */
    /* Estilos independiente de los colores primarios, secundairos, etc. basados en tema */
    --defined-style-1: var(--kw-quinto);
    --defined-style-2: var(--kw-quinto);
    --defined-style-3: var(--common-text-color-light);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--kw-cuarto);
    /* Colores generales */
    /* -> color de fondo de superficies como tarjetas, modales, etc. */
    --surface-color: #FFF; /* BLANCO */
    --surface-secondary-color: #e9ecef; /* GRIS CLARO */
    /* -> color de bordes como inputs, tarjetas, etc. */
    --border-color: #dee2e6; /* GRIS LIGERO */
    --accent-main-color: #ffc107; /* DORADO CLARO */
    --accent-main-light-color: #e0a800; /* DORADO OPACO */
    --accent-main-dark-color: #664d00; /* DORADO OBSCURO */
    --accent-secondary-color: #3a3f99; /* AZUL OSCURO */
    --accent-secondary-light-color: #5b2d8e; /* MORADO MEDIO */
    /*--border-color: #e0e0e0;*/
    /* -> color de mensajes de validación usado como fondo y contorno */
    --valid-color: #2e7d32; /* VERDE */
    --valid-dark-color: #155724; /* VERDE */
    --invalid-color: #d32f2f; /* ROJO */
    --warning-color: #e65100; /* NARANJA OSCURO */




    /* ---------------------------------------------------------------
       Variables del panel administrativo
       Mapean el sistema de tema existente a nombres semánticos usados
       en los CSS del panel, evitando duplicar valores de color.
    --------------------------------------------------------------- */
    --admin-page-bg:        var(--surface-secondary-color); /* fondo del shell de login */
    --admin-card-bg:        var(--surface-color);           /* tarjeta blanca */
    --admin-text-primary:   var(--text-color-dark);
    --admin-text-secondary: var(--common-text-color-muted);
    --admin-color-primary:  var(--primary-color);           /* color primario del tema activo */
    --admin-border-color:   var(--border-color);
    --admin-valid-color:    var(--valid-color);
    --admin-invalid-color:  var(--invalid-color);

    /* ---------------------------------------------------------------
       Tokens MD3 (Material Design 3)
       Material Web (md-*) los usa internamente para auto-estilizarse.
       Se mapean a la paleta KarWash para que los componentes adopten
       los colores del programa sin configuración adicional.
    --------------------------------------------------------------- */
    --md-sys-color-primary:               var(--kw-segundo);            /* #D64123 rojo KW */
    --md-sys-color-on-primary:            #ffffff;
    --md-sys-color-primary-container:     #ffdad3;
    --md-sys-color-on-primary-container:  #410000;
    --md-sys-color-surface:               var(--surface-color);
    --md-sys-color-surface-container:     var(--surface-secondary-color);
    --md-sys-color-surface-container-high: #dde1e4;
    --md-sys-color-on-surface:            var(--text-color-dark);
    --md-sys-color-on-surface-variant:    var(--common-text-color-muted);
    --md-sys-color-outline:               var(--border-color);
    --md-sys-color-outline-variant:       #c8cdd2;
    --md-sys-color-error:                 var(--invalid-color);
    --md-sys-color-on-error:              #ffffff;
    --md-sys-color-error-container:       #f9dedc;
    --md-sys-color-on-error-container:    #410e0b;
    --bg-admin: none; /* Sin imagen de fondo en el panel; theme.js interpreta "none" correctamente */
}

/* Sobreescritura de estilos de acuerdo al tema seleccionado, usando attribute selector */
[data-theme="karwash"] {
    --primary-color: var(--kw-segundo);
    --secondary-color: var(--kw-cuarto);
    --tertiary-color: var(--kw-tercero);
    --accent-color: var(--kw-quinto);
    --bg-color: var(--kw-primero);
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #54C0E8 100%);
    --text-color-dark: #222222;
    --text-color-light: #ffffff;
    --program-logo-image: var(--logo-karwash);
    --defined-style-1: var(--kw-quinto);
    --defined-style-2: var(--kw-quinto);
    --defined-style-3: var(--common-text-color-light);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--kw-cuarto);
}

[data-theme="amigofiel"] {
    --primary-color: var(--af-primero);
    --secondary-color: var(--af-cuarto);
    --tertiary-color: var(--af-tercero);
    --accent-color: var(--af-quinto);
    --bg-color: var(--af-segundo);
    --bg-gradient: linear-gradient(180deg, #f4fffb 0%, #e8f7f3 100%);
    --text-color-dark: #0d3b36;
    --text-color-light: #ffffff;
    --program-logo-image: var(--logo-amigofiel);
    --defined-style-1: var(--af-quinto);
    --defined-style-2: var(--af-tercero);
    --defined-style-3: var(--accent-color);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--af-cuarto);
}

[data-theme="taxigana"] {
    --primary-color: var(--tg-primero);
    --secondary-color: var(--tg-segundo);
    --tertiary-color: var(--tg-tercero);
    --accent-color: var(--tg-cuarto);
    --bg-color: var(--tg-segundo);
    --bg-gradient: linear-gradient(180deg, #fbf7ff 0%, #f3eaf9 100%);
    --text-color-dark: #2d0032;
    --text-color-light: #ffffff;
    --program-logo-image: var(--logo-taxigana);
    --defined-style-1: var(--tg-cuarto);
    --defined-style-2: var(--tg-tercero);
    --defined-style-3: var(--common-text-color-light);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--tg-segundo);
}

/* Membresía puede mapearse visualmente a uno de los programas o ser propio */
[data-theme="membresia"] {
    --primary-color: var(--ms-primero);
    --secondary-color: var(--ms-tercero);
    --tertiary-color: var(--kw-tercero);
    --accent-color: var(--ms-cuarto);
    --bg-color: var(--ms-segundo);
    --bg-gradient: linear-gradient(180deg, #fff8f1 0%, #fff0e0 100%);
    --text-color-dark: #3a2100;
    --text-color-light: #ffffff;
    --program-logo-image: var(--logo-membresia);
    --defined-style-1: var(--ms-cuarto);
    --defined-style-2: var(--ms-segundo);
    --defined-style-3: var(--common-text-color-light);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--ms-tercero);
}

/* Tema "admin" — panel administrativo
   Mantiene la paleta visual de KarWash para que los componentes DevExpress conserven sus colores; solo elimina la imagen de fondo. */
[data-theme="admin"] {
    --primary-color: var(--kw-segundo);
    --secondary-color: var(--kw-cuarto);
    --tertiary-color: var(--kw-tercero);
    --accent-color: var(--kw-quinto);
    --bg-color: var(--kw-primero);
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #54C0E8 100%);
    --text-color-dark: #222222;
    --text-color-light: #ffffff;
    --defined-style-1: var(--kw-quinto);
    --defined-style-2: var(--kw-quinto);
    --defined-style-3: var(--common-text-color-light);
    --defined-style-4: var(--common-text-color-light);
    --defined-style-5: var(--kw-cuarto);
}

/* Se aplica variables globalmente */
html, body {
    color: var(--text-color);
    /* Dejar fondo transparente: el fondo real se pinta en html::before */
    background-color: transparent;
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease;
}

/* Dos capas en el elemento raíz para cross-fade */
html::before,
html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0; /* fondo debajo del contenido (contenido tendrá z-index >= 1) */
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity var(--fade-duration) ease;
    will-change: opacity;
}

/* Dos capas en el elemento raíz para cross-fade (ya las tienes) */
html::before {
    background-image: var(--bg-image-current);
    opacity: 1;
}

html::after {
    background-image: var(--bg-image-next);
    opacity: 0;
}

html.bg-fade::after {
    opacity: 1;
}

html.bg-fade::before {
    opacity: 0;
}

html.bg-fade-swap::before,
html.bg-fade-swap::after {
    transition: none;
}

/* asegurar que el contenido esté por encima del fondo */
.landing-page, .landing-container {
    position: relative;
    z-index: 1;
}

/* safe area */
.status-bar-safe-area {
    height: var(--safe-area-top);
}