/*
 * Notas y descripciones RTF de OfiPro (research R8; estudio técnico §1). Son las clases de la lista cerrada de
 * src/RecuPro.Gestion/Rtf/ClasesRtf.cs: el conversor (HtmlRtf) solo pone estas y nunca un atributo style, que la CSP
 * bloquea (H6). Lo comprueba tests/RecuPro.Gestion.Tests/PielRtfTests.cs.
 * Reglas, como en piel.css:
 *   - los colores y las medidas, en variables de :root; fuera de :root no hay colores literales;
 *   - sin @media ni anidamiento, y un selector por regla.
 * Tamaños: los 8 pt de RTF (\fs16, la letra por defecto de todos los usuarios de OfiPro) son la letra base de la piel
 * (--rp-letra-tamano: Segoe UI 9 pt, unos 12 px); un tamaño de N pt es N/8 de la letra base. MS Sans Serif y las demás
 * fuentes sin clase se ven con la letra de la piel.
 * Colores: rp-rtf-c0…c47 son los 48 colores básicos del diálogo de color de Windows, en su orden (por filas de 8).
 */

:root {
    --rp-rtf-fondo: #FFFFFF;
    --rp-rtf-texto: #000000;
    --rp-rtf-borde-tabla: #A0A0A0;
    --rp-rtf-tamano-base: var(--rp-letra-tamano);
    --rp-rtf-letra-serif: "Times New Roman", Times, serif;
    --rp-rtf-letra-mono: "Courier New", Consolas, monospace;
    /* Sangría: escalones de 24 px (360 twips). Espacio entre párrafos: unos 100, 200 y 300 twips. Tabuladores cada
       media pulgada, como RichEdit. */
    --rp-rtf-sangria: 24px;
    --rp-rtf-espacio-1: 7px;
    --rp-rtf-espacio-2: 13px;
    --rp-rtf-espacio-3: 20px;
    --rp-rtf-tabulador: 48px;
    --rp-rtf-c0: #FF8080;
    --rp-rtf-c1: #FFFF80;
    --rp-rtf-c2: #80FF80;
    --rp-rtf-c3: #00FF80;
    --rp-rtf-c4: #80FFFF;
    --rp-rtf-c5: #0080FF;
    --rp-rtf-c6: #FF80C0;
    --rp-rtf-c7: #FF80FF;
    --rp-rtf-c8: #FF0000;
    --rp-rtf-c9: #FFFF00;
    --rp-rtf-c10: #80FF00;
    --rp-rtf-c11: #00FF40;
    --rp-rtf-c12: #00FFFF;
    --rp-rtf-c13: #0080C0;
    --rp-rtf-c14: #8080C0;
    --rp-rtf-c15: #FF00FF;
    --rp-rtf-c16: #804040;
    --rp-rtf-c17: #FF8040;
    --rp-rtf-c18: #00FF00;
    --rp-rtf-c19: #008080;
    --rp-rtf-c20: #004080;
    --rp-rtf-c21: #8080FF;
    --rp-rtf-c22: #800040;
    --rp-rtf-c23: #FF0080;
    --rp-rtf-c24: #800000;
    --rp-rtf-c25: #FF8000;
    --rp-rtf-c26: #008000;
    --rp-rtf-c27: #008040;
    --rp-rtf-c28: #0000FF;
    --rp-rtf-c29: #0000A0;
    --rp-rtf-c30: #800080;
    --rp-rtf-c31: #8000FF;
    --rp-rtf-c32: #400000;
    --rp-rtf-c33: #804000;
    --rp-rtf-c34: #004000;
    --rp-rtf-c35: #004040;
    --rp-rtf-c36: #000080;
    --rp-rtf-c37: #000040;
    --rp-rtf-c38: #400040;
    --rp-rtf-c39: #400080;
    --rp-rtf-c40: #000000;
    --rp-rtf-c41: #808000;
    --rp-rtf-c42: #808040;
    --rp-rtf-c43: #808080;
    --rp-rtf-c44: #408080;
    --rp-rtf-c45: #C0C0C0;
    --rp-rtf-c46: #400040;
    --rp-rtf-c47: #FFFFFF;
}

/* ------------------------------------------------------------------ Contenedor y bloques */

.rp-rtf {
    background: var(--rp-rtf-fondo);
    color: var(--rp-rtf-texto);
    font-family: var(--rp-letra);
    font-size: var(--rp-rtf-tamano-base);
    overflow-wrap: anywhere;
}

/* :where() deja la especificidad del párrafo en 0,0,1: las clases de sangría y espacio pueden con su margen. */
:where(.rp-rtf) p {
    margin: 0;
    white-space: pre-wrap;
    tab-size: var(--rp-rtf-tabulador);
}

:where(.rp-rtf) ul {
    margin: 0;
    padding-left: 0;
    list-style-type: disc;
    list-style-position: outside;
}

:where(.rp-rtf) li {
    margin: 0;
    white-space: pre-wrap;
    tab-size: var(--rp-rtf-tabulador);
}

:where(.rp-rtf) table {
    border-collapse: collapse;
}

:where(.rp-rtf) td {
    border: 1px solid var(--rp-rtf-borde-tabla);
    padding: 1px 4px;
    vertical-align: top;
    white-space: pre-wrap;
    tab-size: var(--rp-rtf-tabulador);
}

/* Texto sin {\rtf: tal cual, con sus espacios y saltos. */
.rp-rtf-plano {
    white-space: pre-wrap;
    tab-size: var(--rp-rtf-tabulador);
}

/* ------------------------------------------------------------------ Carácter */

.rp-rtf-b {
    font-weight: 700;
}

.rp-rtf-i {
    font-style: italic;
}

.rp-rtf-u {
    text-decoration: underline;
}

.rp-rtf-serif {
    font-family: var(--rp-rtf-letra-serif);
}

.rp-rtf-mono {
    font-family: var(--rp-rtf-letra-mono);
}

/* ------------------------------------------------------------------ Párrafo */

.rp-rtf-qc {
    text-align: center;
}

.rp-rtf-qr {
    text-align: right;
}

.rp-rtf-qj {
    text-align: justify;
}

.rp-rtf-li1 {
    margin-left: calc(var(--rp-rtf-sangria) * 1);
}

.rp-rtf-li2 {
    margin-left: calc(var(--rp-rtf-sangria) * 2);
}

.rp-rtf-li3 {
    margin-left: calc(var(--rp-rtf-sangria) * 3);
}

.rp-rtf-li4 {
    margin-left: calc(var(--rp-rtf-sangria) * 4);
}

.rp-rtf-li5 {
    margin-left: calc(var(--rp-rtf-sangria) * 5);
}

.rp-rtf-li6 {
    margin-left: calc(var(--rp-rtf-sangria) * 6);
}

.rp-rtf-li7 {
    margin-left: calc(var(--rp-rtf-sangria) * 7);
}

.rp-rtf-li8 {
    margin-left: calc(var(--rp-rtf-sangria) * 8);
}

.rp-rtf-sa1 {
    margin-bottom: var(--rp-rtf-espacio-1);
}

.rp-rtf-sa2 {
    margin-bottom: var(--rp-rtf-espacio-2);
}

.rp-rtf-sa3 {
    margin-bottom: var(--rp-rtf-espacio-3);
}

/* ------------------------------------------------------------------ Tamaños (7 a 36 pt; 8 pt es la letra base) */

.rp-rtf-t7 {
    font-size: calc(var(--rp-rtf-tamano-base) * 7 / 8);
}

.rp-rtf-t8 {
    font-size: calc(var(--rp-rtf-tamano-base) * 8 / 8);
}

.rp-rtf-t9 {
    font-size: calc(var(--rp-rtf-tamano-base) * 9 / 8);
}

.rp-rtf-t10 {
    font-size: calc(var(--rp-rtf-tamano-base) * 10 / 8);
}

.rp-rtf-t11 {
    font-size: calc(var(--rp-rtf-tamano-base) * 11 / 8);
}

.rp-rtf-t12 {
    font-size: calc(var(--rp-rtf-tamano-base) * 12 / 8);
}

.rp-rtf-t13 {
    font-size: calc(var(--rp-rtf-tamano-base) * 13 / 8);
}

.rp-rtf-t14 {
    font-size: calc(var(--rp-rtf-tamano-base) * 14 / 8);
}

.rp-rtf-t15 {
    font-size: calc(var(--rp-rtf-tamano-base) * 15 / 8);
}

.rp-rtf-t16 {
    font-size: calc(var(--rp-rtf-tamano-base) * 16 / 8);
}

.rp-rtf-t17 {
    font-size: calc(var(--rp-rtf-tamano-base) * 17 / 8);
}

.rp-rtf-t18 {
    font-size: calc(var(--rp-rtf-tamano-base) * 18 / 8);
}

.rp-rtf-t19 {
    font-size: calc(var(--rp-rtf-tamano-base) * 19 / 8);
}

.rp-rtf-t20 {
    font-size: calc(var(--rp-rtf-tamano-base) * 20 / 8);
}

.rp-rtf-t21 {
    font-size: calc(var(--rp-rtf-tamano-base) * 21 / 8);
}

.rp-rtf-t22 {
    font-size: calc(var(--rp-rtf-tamano-base) * 22 / 8);
}

.rp-rtf-t23 {
    font-size: calc(var(--rp-rtf-tamano-base) * 23 / 8);
}

.rp-rtf-t24 {
    font-size: calc(var(--rp-rtf-tamano-base) * 24 / 8);
}

.rp-rtf-t25 {
    font-size: calc(var(--rp-rtf-tamano-base) * 25 / 8);
}

.rp-rtf-t26 {
    font-size: calc(var(--rp-rtf-tamano-base) * 26 / 8);
}

.rp-rtf-t27 {
    font-size: calc(var(--rp-rtf-tamano-base) * 27 / 8);
}

.rp-rtf-t28 {
    font-size: calc(var(--rp-rtf-tamano-base) * 28 / 8);
}

.rp-rtf-t29 {
    font-size: calc(var(--rp-rtf-tamano-base) * 29 / 8);
}

.rp-rtf-t30 {
    font-size: calc(var(--rp-rtf-tamano-base) * 30 / 8);
}

.rp-rtf-t31 {
    font-size: calc(var(--rp-rtf-tamano-base) * 31 / 8);
}

.rp-rtf-t32 {
    font-size: calc(var(--rp-rtf-tamano-base) * 32 / 8);
}

.rp-rtf-t33 {
    font-size: calc(var(--rp-rtf-tamano-base) * 33 / 8);
}

.rp-rtf-t34 {
    font-size: calc(var(--rp-rtf-tamano-base) * 34 / 8);
}

.rp-rtf-t35 {
    font-size: calc(var(--rp-rtf-tamano-base) * 35 / 8);
}

.rp-rtf-t36 {
    font-size: calc(var(--rp-rtf-tamano-base) * 36 / 8);
}

/* ------------------------------------------------------------------ Colores (los 48 de Windows) */

.rp-rtf-c0 {
    color: var(--rp-rtf-c0);
}

.rp-rtf-c1 {
    color: var(--rp-rtf-c1);
}

.rp-rtf-c2 {
    color: var(--rp-rtf-c2);
}

.rp-rtf-c3 {
    color: var(--rp-rtf-c3);
}

.rp-rtf-c4 {
    color: var(--rp-rtf-c4);
}

.rp-rtf-c5 {
    color: var(--rp-rtf-c5);
}

.rp-rtf-c6 {
    color: var(--rp-rtf-c6);
}

.rp-rtf-c7 {
    color: var(--rp-rtf-c7);
}

.rp-rtf-c8 {
    color: var(--rp-rtf-c8);
}

.rp-rtf-c9 {
    color: var(--rp-rtf-c9);
}

.rp-rtf-c10 {
    color: var(--rp-rtf-c10);
}

.rp-rtf-c11 {
    color: var(--rp-rtf-c11);
}

.rp-rtf-c12 {
    color: var(--rp-rtf-c12);
}

.rp-rtf-c13 {
    color: var(--rp-rtf-c13);
}

.rp-rtf-c14 {
    color: var(--rp-rtf-c14);
}

.rp-rtf-c15 {
    color: var(--rp-rtf-c15);
}

.rp-rtf-c16 {
    color: var(--rp-rtf-c16);
}

.rp-rtf-c17 {
    color: var(--rp-rtf-c17);
}

.rp-rtf-c18 {
    color: var(--rp-rtf-c18);
}

.rp-rtf-c19 {
    color: var(--rp-rtf-c19);
}

.rp-rtf-c20 {
    color: var(--rp-rtf-c20);
}

.rp-rtf-c21 {
    color: var(--rp-rtf-c21);
}

.rp-rtf-c22 {
    color: var(--rp-rtf-c22);
}

.rp-rtf-c23 {
    color: var(--rp-rtf-c23);
}

.rp-rtf-c24 {
    color: var(--rp-rtf-c24);
}

.rp-rtf-c25 {
    color: var(--rp-rtf-c25);
}

.rp-rtf-c26 {
    color: var(--rp-rtf-c26);
}

.rp-rtf-c27 {
    color: var(--rp-rtf-c27);
}

.rp-rtf-c28 {
    color: var(--rp-rtf-c28);
}

.rp-rtf-c29 {
    color: var(--rp-rtf-c29);
}

.rp-rtf-c30 {
    color: var(--rp-rtf-c30);
}

.rp-rtf-c31 {
    color: var(--rp-rtf-c31);
}

.rp-rtf-c32 {
    color: var(--rp-rtf-c32);
}

.rp-rtf-c33 {
    color: var(--rp-rtf-c33);
}

.rp-rtf-c34 {
    color: var(--rp-rtf-c34);
}

.rp-rtf-c35 {
    color: var(--rp-rtf-c35);
}

.rp-rtf-c36 {
    color: var(--rp-rtf-c36);
}

.rp-rtf-c37 {
    color: var(--rp-rtf-c37);
}

.rp-rtf-c38 {
    color: var(--rp-rtf-c38);
}

.rp-rtf-c39 {
    color: var(--rp-rtf-c39);
}

.rp-rtf-c40 {
    color: var(--rp-rtf-c40);
}

.rp-rtf-c41 {
    color: var(--rp-rtf-c41);
}

.rp-rtf-c42 {
    color: var(--rp-rtf-c42);
}

.rp-rtf-c43 {
    color: var(--rp-rtf-c43);
}

.rp-rtf-c44 {
    color: var(--rp-rtf-c44);
}

.rp-rtf-c45 {
    color: var(--rp-rtf-c45);
}

.rp-rtf-c46 {
    color: var(--rp-rtf-c46);
}

.rp-rtf-c47 {
    color: var(--rp-rtf-c47);
}
