/* =====================================================================
   TEMA DEL PORTAL: lo unico que hay que tocar para cambiar la imagen.
   Colores y tipografias de www.guerrero.law (octubre 2026). Cuando llegue
   la web nueva del estudio, se cambian estos valores y nada mas.
   ===================================================================== */
:root {
    /* Marca */
    --marca: #00669C;
    --marca-oscuro: #004E78;
    --marca-profundo: #0B2E45;
    --marca-claro: #E6F1F7;
    --acento: #12A39A;          /* turquesa del logotipo */
    --acento-claro: #E3F6F4;

    /* Avisos */
    --alerta: #B54708;
    --alerta-claro: #FEF3E2;
    --peligro: #B42318;
    --peligro-claro: #FDECEA;
    --ok: #1F7A4D;
    --ok-claro: #E7F5EE;

    /* Neutros */
    --texto: #2B2B30;
    --texto-suave: #56565C;
    --texto-tenue: #85858C;
    --borde: #E2E4E8;
    --fondo: #FFFFFF;
    --fondo-suave: #F5F7F9;

    /* Tipografias */
    --letra-titulo: "Marcellus", Georgia, serif;
    --letra-texto: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Formas */
    --radio: 12px;
    --radio-chico: 8px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
    --sombra-alta: 0 8px 32px rgba(11, 46, 69, .18);

    /* --- Syncfusion toma los mismos colores y letra --- */
    --color-sf-primary: var(--marca);
    --color-sf-primary-dark: var(--marca-oscuro);
    --color-sf-primary-darker: var(--marca-profundo);
    --color-sf-primary-light: #3388B5;
    --color-sf-primary-lighter: var(--marca-claro);
    --color-sf-primary-text-color: #fff;
    --color-sf-primary-bg-color: var(--marca);
    --color-sf-primary-bg-color-hover: var(--marca-oscuro);
    --color-sf-primary-bg-color-focus: var(--marca-oscuro);
    --color-sf-primary-bg-color-pressed: var(--marca-profundo);
    --color-sf-primary-border-color: var(--marca);
    --color-sf-primary-border-color-hover: var(--marca-oscuro);
    --color-sf-primary-border-color-focus: var(--marca-oscuro);
    --color-sf-primary-border-color-pressed: var(--marca-profundo);
    --e-font-name: var(--letra-texto);
}