﻿/* ============================================================
   PALETA DIGITAL OFICIAL 2024–2030 (RGB)
   ============================================================ */

:root {
    /* GUINDAS */
    --puebla-guinda-dark: #5F1B2D; /* 95 27 45 */
    --puebla-guinda: #861E34; /* 134 30 52 */
    --puebla-guinda-light: #AF1732; /* 175 23 50 */
    /* OCRE / BEIGE */
    --puebla-ocre: #C79B66; /* 199 155 102 */
    --puebla-beige: #E2BE96; /* 226 190 150 */
    --puebla-marfil: #FFFDED; /* 255 253 237 */
    /* VERDES */
    --puebla-green-dark: #0E312D; /* 14 49 45 */
    --puebla-green: #216358; /* 33 99 88 */
    --puebla-green-light: #3C9B85; /* 60 155 133 */
    /* GRISES */
    --puebla-gray-dark: #484747; /* 72 71 71 */
    --puebla-gray: #B3B2B2; /* 179 178 178 */
    --puebla-gray-light: #ECECEC; /* 236 236 236 */
    /* TEXTOS */
    --text-light: #ffffff;
    --text-dark: #222222;
    /* COMPONENTES INTERNOS */
    --ep-primary: #005fa3;
    --ep-success: #0a7f42;
    --ep-warning: #b36b00;
    --ep-error: #b00020;
    --ep-info: #0077cc;
    --ep-neutral: #666;
}

/* ============================================================
   TEMAS INSTITUCIONALES (DIGITAL)
   ============================================================ */

.ep-mono-guinda-dark {
    background: var(--puebla-guinda-dark);
    color: var(--text-light);
}

    .ep-mono-guinda-dark .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-mono-guinda {
    background: var(--puebla-guinda);
    color: var(--text-light);
}

    .ep-mono-guinda .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-mono-guinda-light {
    background: var(--puebla-guinda-light);
    color: var(--text-light);
}

    .ep-mono-guinda-light .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-mono-ocre {
    background: var(--puebla-ocre);
    color: var(--text-light);
}

    .ep-mono-ocre .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-mono-beige {
    background: var(--puebla-beige);
    color: var(--text-dark);
}

    .ep-mono-beige .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-mono-marfil {
    background: var(--puebla-marfil);
    color: var(--text-dark);
}

    .ep-mono-marfil .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-mono-green-dark {
    background: var(--puebla-green-dark);
    color: var(--text-light);
}

    .ep-mono-green-dark .ep-emphasis {
        color: var(--puebla-green-light);
    }

.ep-mono-green {
    background: var(--puebla-green);
    color: var(--text-light);
}

    .ep-mono-green .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-mono-green-light {
    background: var(--puebla-green-light);
    color: var(--text-light);
}

    .ep-mono-green-light .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-mono-gray-dark {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-mono-gray-dark .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-mono-gray {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-mono-gray .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-mono-gray-light {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-mono-gray-light .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-comp-guindaDark-ocre {
    background: var(--puebla-guinda-dark);
    color: var(--text-light);
}

    .ep-comp-guindaDark-ocre .ep-emphasis {
        color: var(--puebla-ocre);
    }

.ep-comp-guinda-beige {
    background: var(--puebla-guinda);
    color: var(--text-light);
}

    .ep-comp-guinda-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-comp-guindaLight-marfil {
    background: var(--puebla-guinda-light);
    color: var(--text-light);
}

    .ep-comp-guindaLight-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-comp-ocre-guindaLight {
    background: var(--puebla-ocre);
    color: var(--text-light);
}

    .ep-comp-ocre-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-comp-beige-guinda {
    background: var(--puebla-beige);
    color: var(--text-dark);
}

    .ep-comp-beige-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-comp-marfil-guindaDark {
    background: var(--puebla-marfil);
    color: var(--text-dark);
}

    .ep-comp-marfil-guindaDark .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-comp-greenDark-ocre {
    background: var(--puebla-green-dark);
    color: var(--text-light);
}

    .ep-comp-greenDark-ocre .ep-emphasis {
        color: var(--puebla-ocre);
    }

.ep-comp-green-beige {
    background: var(--puebla-green);
    color: var(--text-light);
}

    .ep-comp-green-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-comp-greenLight-marfil {
    background: var(--puebla-green-light);
    color: var(--text-light);
}

    .ep-comp-greenLight-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-comp-grayDark-guindaLight {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-comp-grayDark-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-comp-gray-guinda {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-comp-gray-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-comp-grayLight-guindaDark {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-comp-grayLight-guindaDark .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-ana-guindaDark-guinda {
    background: var(--puebla-guinda-dark);
    color: var(--text-light);
}

    .ep-ana-guindaDark-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-ana-guinda-guindaLight {
    background: var(--puebla-guinda);
    color: var(--text-light);
}

    .ep-ana-guinda-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-ana-guindaDark-guindaLight {
    background: var(--puebla-guinda-dark);
    color: var(--text-light);
}

    .ep-ana-guindaDark-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-ana-ocre-beige {
    background: var(--puebla-ocre);
    color: var(--text-light);
}

    .ep-ana-ocre-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-ana-beige-marfil {
    background: var(--puebla-beige);
    color: var(--text-dark);
}

    .ep-ana-beige-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-ana-ocre-marfil {
    background: var(--puebla-ocre);
    color: var(--text-light);
}

    .ep-ana-ocre-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-ana-greenDark-green {
    background: var(--puebla-green-dark);
    color: var(--text-light);
}

    .ep-ana-greenDark-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-ana-green-greenLight {
    background: var(--puebla-green);
    color: var(--text-light);
}

    .ep-ana-green-greenLight .ep-emphasis {
        color: var(--puebla-green-light);
    }

.ep-ana-greenDark-greenLight {
    background: var(--puebla-green-dark);
    color: var(--text-light);
}

    .ep-ana-greenDark-greenLight .ep-emphasis {
        color: var(--puebla-green-light);
    }

.ep-ana-grayDark-gray {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-ana-grayDark-gray .ep-emphasis {
        color: var(--puebla-gray);
    }

.ep-ana-gray-grayLight {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-ana-gray-grayLight .ep-emphasis {
        color: var(--puebla-gray-light);
    }

.ep-ana-grayDark-grayLight {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-ana-grayDark-grayLight .ep-emphasis {
        color: var(--puebla-gray-light);
    }

.ep-tri-guindaDark-green-beige {
    background: var(--puebla-guinda-dark);
    color: var(--puebla-green-light);
}

    .ep-tri-guindaDark-green-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-tri-guinda-greenDark-marfil {
    background: var(--puebla-guinda);
    color: var(--puebla-green-dark);
}

    .ep-tri-guinda-greenDark-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-tri-guindaLight-green-ocre {
    background: var(--puebla-guinda-light);
    color: var(--puebla-green);
}

    .ep-tri-guindaLight-green-ocre .ep-emphasis {
        color: var(--puebla-ocre);
    }

.ep-tri-greenDark-guinda-beige {
    background: var(--puebla-green-dark);
    color: var(--puebla-guinda);
}

    .ep-tri-greenDark-guinda-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-tri-green-guindaLight-marfil {
    background: var(--puebla-green);
    color: var(--puebla-guinda-light);
}

    .ep-tri-green-guindaLight-marfil .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-tri-greenLight-guindaDark-ocre {
    background: var(--puebla-green-light);
    color: var(--puebla-guinda-dark);
}

    .ep-tri-greenLight-guindaDark-ocre .ep-emphasis {
        color: var(--puebla-ocre);
    }

.ep-tri-ocre-guinda-greenLight {
    background: var(--puebla-ocre);
    color: var(--puebla-guinda);
}

    .ep-tri-ocre-guinda-greenLight .ep-emphasis {
        color: var(--puebla-green-light);
    }

.ep-tri-beige-guindaDark-green {
    background: var(--puebla-beige);
    color: var(--puebla-guinda-dark);
}

    .ep-tri-beige-guindaDark-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-tri-marfil-guindaLight-greenDark {
    background: var(--puebla-marfil);
    color: var(--puebla-guinda-light);
}

    .ep-tri-marfil-guindaLight-greenDark .ep-emphasis {
        color: var(--puebla-green-dark);
    }

.ep-tri-grayDark-guinda-beige {
    background: var(--puebla-gray-dark);
    color: var(--puebla-guinda);
}

    .ep-tri-grayDark-guinda-beige .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-tri-gray-guindaDark-ocre {
    background: var(--puebla-gray);
    color: var(--puebla-guinda-dark);
}

    .ep-tri-gray-guindaDark-ocre .ep-emphasis {
        color: var(--puebla-ocre);
    }

.ep-tri-grayLight-guindaLight-green {
    background: var(--puebla-gray-light);
    color: var(--puebla-guinda-light);
}

    .ep-tri-grayLight-guindaLight-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-neutral-grayDark-guindaDark {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-neutral-grayDark-guindaDark .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-neutral-grayDark-guinda {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-neutral-grayDark-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-neutral-grayDark-guindaLight {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-neutral-grayDark-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-neutral-gray-guindaDark {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-neutral-gray-guindaDark .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-neutral-gray-guinda {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-neutral-gray-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-neutral-gray-guindaLight {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-neutral-gray-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-neutral-grayLight-guindaDark {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-neutral-grayLight-guindaDark .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-neutral-grayLight-guinda {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-neutral-grayLight-guinda .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-neutral-grayLight-guindaLight {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-neutral-grayLight-guindaLight .ep-emphasis {
        color: var(--puebla-guinda-light);
    }

.ep-neutral-grayDark-green {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-neutral-grayDark-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-neutral-gray-green {
    background: var(--puebla-gray);
    color: var(--text-dark);
}

    .ep-neutral-gray-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-neutral-grayLight-green {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-neutral-grayLight-green .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-access-guindaDark {
    background: var(--puebla-guinda-dark);
    color: var(--text-light);
}

    .ep-access-guindaDark .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-greenDark {
    background: var(--puebla-green-dark);
    color: var(--text-light);
}

    .ep-access-greenDark .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-grayDark {
    background: var(--puebla-gray-dark);
    color: var(--text-light);
}

    .ep-access-grayDark .ep-emphasis {
        color: var(--puebla-beige);
    }

.ep-access-grayLight {
    background: var(--puebla-gray-light);
    color: var(--text-dark);
}

    .ep-access-grayLight .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-access-marfil {
    background: var(--puebla-marfil);
    color: var(--text-dark);
}

    .ep-access-marfil .ep-emphasis {
        color: var(--puebla-guinda-dark);
    }

.ep-access-guindaDark-grayLight {
    background: var(--puebla-guinda-dark);
    color: var(--puebla-gray-light);
}

    .ep-access-guindaDark-grayLight .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-greenDark-grayLight {
    background: var(--puebla-green-dark);
    color: var(--puebla-gray-light);
}

    .ep-access-greenDark-grayLight .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-grayDark-guindaLight {
    background: var(--puebla-gray-dark);
    color: var(--puebla-guinda-light);
}

    .ep-access-grayDark-guindaLight .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-grayDark-greenLight {
    background: var(--puebla-gray-dark);
    color: var(--puebla-green-light);
}

    .ep-access-grayDark-greenLight .ep-emphasis {
        color: var(--puebla-marfil);
    }

.ep-access-grayLight-guindaDark {
    background: var(--puebla-gray-light);
    color: var(--puebla-guinda-dark);
}

    .ep-access-grayLight-guindaDark .ep-emphasis {
        color: var(--puebla-guinda);
    }

.ep-access-grayLight-greenDark {
    background: var(--puebla-gray-light);
    color: var(--puebla-green-dark);
}

    .ep-access-grayLight-greenDark .ep-emphasis {
        color: var(--puebla-green);
    }

.ep-access-marfil-guindaDark {
    background: var(--puebla-marfil);
    color: var(--puebla-guinda-dark);
}

    .ep-access-marfil-guindaDark .ep-emphasis {
        color: var(--puebla-guinda);
    }
