/* ==========================================================================
   APOLO SERVICES 2026 — Estilos de Compatibilidad y Personalización de Temas
   Permite que vistas y tarjetas personalizadas (como InfoMex) adopten los
   colores primarios y secundarios configurados por el cliente.
   ========================================================================== */

:root {
    /* Variables de compatibilidad vinculadas a tokens */
    --color-primario: var(--apolo-color-primary, #107fc9);
    --color-primario-light: var(--apolo-color-primary-light, #279be8);
    --color-primario-dark-60: var(--apolo-color-primary-dark, #0D56A6);
    --color-primario-dark-70: var(--apolo-color-primary-navy, #194270);
    --color-secundario: var(--apolo-color-accent, #fac414);
    --color-secundario-light: var(--apolo-color-accent-light, #FAC4141A);

    --primary-color-40: var(--color-primario-light);
    --primary-color-50: var(--color-primario);
    --primary-color-60: var(--color-primario-dark-60);
    --primary-color-70: var(--color-primario-dark-70);
    --secondary-color: var(--color-secundario);
    --secondary-color-40: var(--color-secundario-light);

    --tertiary-color-30: #dddddd;
    --tertiary-color-50: #999999;
    --tertiary-color-60: #555555;
    --tertiary-color-70: #333333;
    --white-color: #ffffff;
    --dark-color: #000000;
}

/* ── Clases de Fondo con Colores de Personalización ── */
.apl-bg-primary-50 {
    background-color: var(--primary-color-50) !important;
    color: var(--white-color) !important;
}

.apl-bg-primary-60 {
    background-color: var(--primary-color-60) !important;
    color: var(--white-color) !important;
}

.apl-bg-primary-70 {
    background-color: var(--primary-color-70) !important;
    color: var(--white-color) !important;
}

.apl-bg-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--white-color) !important;
}

.apl-bg-secondary-subtle {
    background-color: var(--color-secundario-light) !important;
}

.apl-bg-tertiary-50 {
    background-color: var(--tertiary-color-50) !important;
    color: var(--white-color) !important;
}

.apl-bg-tertiary-60 {
    background-color: var(--tertiary-color-60) !important;
    color: var(--white-color) !important;
}

.apl-bg-tertiary-70 {
    background-color: var(--tertiary-color-70) !important;
    color: var(--white-color) !important;
}

/* ── Clases de Texto ── */
.apl-text-primary-50 {
    color: var(--primary-color-50) !important;
}

.apl-text-primary-60 {
    color: var(--primary-color-60) !important;
}

.apl-text-primary-70 {
    color: var(--primary-color-70) !important;
}

.apl-text-secondary {
    color: var(--secondary-color) !important;
}

.apl-text-tertiary-70 {
    color: var(--tertiary-color-70) !important;
}

/* ── Bordes y Contenedores ── */
.apl-br-20 {
    border-radius: 20px !important;
}

.apl-container-white-apolo {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 20px;
}

.apl-container-light {
    background-color: var(--apolo-surface-app-bg, #f2f2f2);
    color: var(--dark-color);
    padding: 15px;
    border-radius: 10px;
}