/* ═══════════════════════════════════════════════════════════════
   Paleta del 21.º Congreso Iberoamericano de Pacientes con Cáncer.
   Valores tomados del sistema visual entregado por el equipo de
   diseño. No se alteran: los cinco pares ruta/sobre-ruta cumplen
   WCAG AA (ratios 4,95-8,57) y cualquier retoque los rompe.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Superficies y tinta */
    --hueso: #EAE8E7;
    --hueso-claro: #F4F3F2;
    --hero-fondo: #EFEDEC;   /* el mismo blanco del archivo del hero */
    --hero-banda: #021D30;   /* el mismo azul de su franja inferior */
    --tinta: #001A2D;
    --morado: #813B94;
    --morado-oscuro: #6D2F7E;   /* solo para :hover del morado */
    --linea: #D4D0CE;
    --gris: #5A6470;

    /* Medidas del sistema */
    --max: 1180px;
    --r: 14px;   /* NO es medida de tarjeta: la usan el hero y los chips */

    /*
     * Medidas de la tarjeta, únicas para todo el sitio. El sistema
     * visual entregado escribía la misma caja con cuatro rellenos
     * distintos (22px 24px, 22px 22px, 24px 22px, 26px 22px) y con
     * radios repartidos entre 12px, 14px literal y var(--r). El
     * cliente autorizó tratar esas diferencias de 2-4px como deriva,
     * no como intención: se toma por canónica la .tarjeta del sistema
     * (22px 24px / 12px) y a partir de aquí ninguna hoja de página
     * vuelve a definir la caja. Ver css/style-cards.css.
     */
    --tarjeta-relleno: 22px 24px;
    --tarjeta-radio: 12px;

    /*
     * Relleno de las cajas que NO son tarjeta (avisos, filtros, estados
     * vacios, cajas de logo). La Fase 4 las escribio seis veces con cinco
     * rellenos distintos (16/20, 20/22, 46/26, 20, 12/16): misma deriva que
     * ya se corrigio en la tarjeta, reaparecida con otros nombres. Se toma
     * un valor unico y .panel (style.css) es su unica definicion.
     */
    --panel-relleno: 18px 20px;

    /*
     * Rutas temáticas. El color de ruta NUNCA se usa como color de
     * texto: es fondo, filete o marca. «--sobre-*» es el color que
     * debe ir ENCIMA de su ruta.
     */
    --ruta-tumores-solidos: #813B94;              --sobre-tumores-solidos: #FFFFFF;
    --ruta-hematologia: #D61F22;                  --sobre-hematologia: #FFFFFF;
    --ruta-investigacion-y-diagnostico: #0E7C86;  --sobre-investigacion-y-diagnostico: #FFFFFF;
    --ruta-bienestar-y-la-vida: #60A711;          --sobre-bienestar-y-la-vida: #001A2D;
    --ruta-derechos-y-acceso: #F2A503;            --sobre-derechos-y-acceso: #001A2D;

    /*
     * Ruta activa del subárbol. Cualquier elemento con
     * data-ruta="<id>" fija --c (color de ruta) y --sobre (texto que
     * va encima), y sus descendientes los heredan. Así la Fase 4
     * colorea tarjetas, filetes y etiquetas sin escribir una regla
     * nueva por cada ruta. Valores por defecto: morado de marca.
     */
    --c: var(--morado);
    --sobre: #FFFFFF;

    /*
     * --sc es el MISMO valor que --sobre con el nombre que usa el equipo
     * de diseño en sus reglas (.inicial{background:var(--c);color:var(--sc)}).
     * Se mantienen los dos para que la Fase 4 pueda portar esas reglas tal
     * cual: con --sc sin definir el texto caería al --tinta heredado sobre
     * #D61F22 o #0E7C86, justo el emparejamiento que esta pareja evita.
     * Cualquier bloque [data-ruta] nuevo debe declarar los dos nombres.
     */
    --sc: var(--sobre);
}

[data-ruta="tumores-solidos"] {
    --c: var(--ruta-tumores-solidos);
    --sobre: var(--sobre-tumores-solidos);
    --sc: var(--sobre-tumores-solidos);
}

[data-ruta="hematologia"] {
    --c: var(--ruta-hematologia);
    --sobre: var(--sobre-hematologia);
    --sc: var(--sobre-hematologia);
}

[data-ruta="investigacion-y-diagnostico"] {
    --c: var(--ruta-investigacion-y-diagnostico);
    --sobre: var(--sobre-investigacion-y-diagnostico);
    --sc: var(--sobre-investigacion-y-diagnostico);
}

[data-ruta="bienestar-y-la-vida"] {
    --c: var(--ruta-bienestar-y-la-vida);
    --sobre: var(--sobre-bienestar-y-la-vida);
    --sc: var(--sobre-bienestar-y-la-vida);
}

[data-ruta="derechos-y-acceso"] {
    --c: var(--ruta-derechos-y-acceso);
    --sobre: var(--sobre-derechos-y-acceso);
    --sc: var(--sobre-derechos-y-acceso);
}

/* Helpers de ruta: la pareja siempre junta, nunca el color suelto. */
.en-ruta {
    background: var(--c);
    color: var(--sobre);
}

.filete-ruta {
    border-left: 6px solid var(--c);
}

.marca-ruta {
    background: var(--c);
}