/* ── ✍️ PROSA REDACTADA POR LA IA — asset COMPARTIDO del RCL InsCore.Ui.Gadgets ─────────────────────
   SSOT de cómo se lee un texto en Markdown que ESCRIBE LA IA: la prosa de PÁGINA (`.ins-ai-prose`, hoy
   el resumen «Humanizado» del comportamiento del producto) y la burbuja de CHAT (`.ai-md`, al final del
   fichero). Dos clases, un hogar.
   Self-contained con var(--token, fallback): quien traiga tokens los usa, quien no cae al neutro.

   🌳 QUÉ DEFECTO CIERRA, Y POR QUÉ VIVE AQUÍ Y NO EN LA PANTALLA
   El panel «Comportamiento del producto» pintaba su resumen con la clase `ai-md`, pero esa clase NO
   tenía hoja de estilo propia: sus reglas vivían dentro de un `<style>` LOCAL de `AiChatBody.razor`, y
   ese componente solo entra en el DOM cuando la correduría tiene la IA encendida Y ha abierto alguna
   vez el cajón del asistente. Fuera de ese caso el resumen se renderizaba SIN NINGUNA regla: con el
   reset de MudBlazor (`ul { margin:0; padding:0 }`) las viñetas quedaban pegadas al borde izquierdo
   del panel, los encabezados en negrita se pegaban a la lista anterior y el texto largo se salía por
   la derecha. Medido en vivo por él, 22-ago-2026.

   Y por eso el arreglo NO es copiar aquellas reglas en la pantalla: una clase con dos hogares diverge
   en silencio (M-137), y una hoja que solo existe mientras otro componente está montado no es una
   hoja, es una casualidad. La prosa de página tiene su propia clase (`.ins-ai-prose`), su propio
   fichero y su propio enlace en el host — así no depende de que el chat esté abierto ni la puede
   pisar el `<style>` del chat.

   ⚠️ ZONA: la enlazan `InsCore.Web` y `InsCore.Backoffice.Web` (sus App.razor). Son las dos superficies
   que pintan texto redactado por la IA; el Portal del tomador no pinta ninguna y por eso no la trae.

   🧩 s86 · DOS CLASES, UN SOLO HOGAR. Este fichero nació con `.ins-ai-prose` (prosa de PÁGINA) y dejaba
   `.ai-md` (burbuja de CHAT) donde estaba: dentro de un `<style>` local de `AiChatBody.razor`. El ritmo
   de las dos superficies es distinto a propósito —la burbuja numera pasos en círculo y sangra menos—,
   pero eso justifica DOS CLASES, no dos hogares: `.ai-md` estaba escrita DOS VECES, una por host, y las
   dos copias YA habían divergido. Medido el 23-ago-2026: el número del paso pintaba
   `--mud-palette-primary-text` en el Backoffice y `--mud-palette-primary-contrastText` en el host del
   corredor, y esa segunda no es una variable que MudBlazor emita —es el nombre de la propiedad de C#—,
   así que allí el número se quedaba SIN color declarado dentro de un círculo de color primario. La copia
   se cierra trayendo la clase aquí, con el token que sí existe. */

.ins-ai-prose {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--mud-palette-text-primary, inherit);
    /* El resumen cita nombres de garantía y de campo que pueden venir sin espacios; sin esto una
       palabra larga estira el bloque y el texto se sale por la derecha del panel. */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* El primer y el último bloque no añaden hueco: el aire de fuera lo pone el panel que lo contiene. */
.ins-ai-prose > :first-child { margin-top: 0; }
.ins-ai-prose > :last-child { margin-bottom: 0; }

.ins-ai-prose p { margin: 0 0 0.6rem; }

/* ── Listas: SANGRÍA EXPLÍCITA ──────────────────────────────────────────────────────────────────────
   `padding-left` (no `margin-left`) para que la viñeta caiga DENTRO del bloque de texto y no en el
   borde del panel, y `list-style` declarado porque el reset de MudBlazor lo apaga. El segundo nivel
   sangra otro escalón: es lo que hace legible una lista anidada sin leer la viñeta. */
.ins-ai-prose ul,
.ins-ai-prose ol {
    margin: 0.35rem 0 0.9rem;
    padding-left: 1.6rem;
}

.ins-ai-prose ul { list-style: disc outside; }
.ins-ai-prose ol { list-style: decimal outside; }

.ins-ai-prose ul ul,
.ins-ai-prose ul ol,
.ins-ai-prose ol ul,
.ins-ai-prose ol ol {
    margin: 0.3rem 0 0.4rem;
    padding-left: 1.5rem;
}

.ins-ai-prose ul ul { list-style: circle outside; }
.ins-ai-prose ul ul ul { list-style: square outside; }

.ins-ai-prose li { margin: 0 0 0.3rem; padding-left: 0.15rem; }
.ins-ai-prose li:last-child { margin-bottom: 0; }

/* ── Aire por ENCIMA del encabezado de sección ──────────────────────────────────────────────────────
   El redactor emite las cuatro secciones («Qué cubre», «Qué ajusta la prima», …) como un párrafo que
   empieza en negrita, no como un `<h*>`. Sin esta regla el encabezado nace pegado a la lista que
   cierra la sección anterior y las cuatro secciones se leen como un solo bloque. */
.ins-ai-prose ul + p,
.ins-ai-prose ol + p {
    margin-top: 1.1rem;
}

.ins-ai-prose strong { font-weight: 700; color: var(--mud-palette-text-primary, inherit); }

/* Si el modelo sí usa encabezados Markdown, se tratan con el mismo ritmo que la negrita de sección. */
.ins-ai-prose h1,
.ins-ai-prose h2,
.ins-ai-prose h3,
.ins-ai-prose h4 {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 1.2rem 0 0.4rem;
    color: var(--mud-palette-primary, inherit);
}

.ins-ai-prose code {
    font-family: "Cascadia Code", "Fira Code", monospace;
    font-size: 0.82em;
    background: var(--mud-palette-action-default-hover, rgba(127,127,127,0.12));
    border: 1px solid var(--mud-palette-lines-default, rgba(127,127,127,0.2));
    padding: 0.12em 0.4em;
    border-radius: 4px;
}

/* Un bloque de código no ensancha el panel: se desplaza dentro de su propia caja. */
.ins-ai-prose pre {
    margin: 0.5rem 0 0.9rem;
    padding: 0.6rem 0.8rem;
    overflow-x: auto;
    max-width: 100%;
    border-radius: 6px;
    background: var(--mud-palette-action-default-hover, rgba(127,127,127,0.10));
}

.ins-ai-prose pre code { background: none; border: none; padding: 0; }

.ins-ai-prose blockquote {
    margin: 0.5rem 0 0.9rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    border-left: 3px solid var(--mud-palette-lines-default, rgba(127,127,127,0.3));
    color: var(--mud-palette-text-secondary, inherit);
}

/* ══ 💬 BURBUJA DE CHAT (.ai-md) ═════════════════════════════════════════════════════════════════════
   La OTRA superficie de prosa de la IA: estrecha, conversacional y con pasos numerados en círculo. No
   comparte reglas con `.ins-ai-prose` —una respuesta de chat y un resumen de página se leen distinto—,
   pero sí comparte HOGAR: hasta la s86 estas reglas vivían duplicadas en el `<style>` local de los dos
   `AiChatBody.razor`, y las dos copias ya no decían lo mismo.
   La consumen `InsCore.Web` y `InsCore.Backoffice.Web`; el marcado (`<div class="ai-md">`) no cambia. */

/* counter-reset en el CONTENEDOR (no en cada ol): si el modelo intercala sub-viñetas que parten los
   pasos en varias listas, el número sigue siendo continuo (1,2,3…) y no reinicia a 1 en cada bloque. */
.ai-md { font-size: 0.875rem; line-height: 1.65; counter-reset: ai-step; }
.ai-md p { margin: 0 0 0.55rem 0; }
.ai-md p:last-child { margin-bottom: 0; }

/* Pasos numerados: círculo con color primario. */
.ai-md ol { list-style: none; margin: 0.4rem 0 0.6rem 0; padding: 0; }

/* Número en círculo posicionado de forma absoluta + sangría colgante: el contenido
   (negrita, dos puntos y texto) fluye en línea sin que el gap del flex separe el «:». */
.ai-md ol li { counter-increment: ai-step; position: relative; padding-left: 2rem; margin-bottom: 0.45rem; }

.ai-md ol li::before {
    content: counter(ai-step);
    position: absolute; left: 0; top: 0.1rem;
    width: 1.45rem; height: 1.45rem;
    background: var(--mud-palette-primary);
    /* ⚠️ `--mud-palette-primary-text` es la variable que MudBlazor EMITE para el texto sobre primario.
       La copia del host del corredor decía `--mud-palette-primary-contrastText`, que es el nombre de la
       propiedad de C# y no existe como variable CSS: el número se quedaba sin color declarado sobre un
       círculo de color primario. El fallback cubre a cualquier consumidor que no traiga la paleta. */
    color: var(--mud-palette-primary-text, #fff);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}

.ai-md ul { margin: 0.4rem 0 0.6rem 1.1rem; padding: 0; }
.ai-md ul li { margin-bottom: 0.35rem; list-style-type: "›  "; }

/* Encabezados con acento. */
.ai-md h1, .ai-md h2, .ai-md h3 {
    font-size: 0.9rem; font-weight: 700; margin: 0.9rem 0 0.35rem;
    color: var(--mud-palette-primary); letter-spacing: 0.01em;
}
.ai-md h3 { font-size: 0.85rem; color: var(--mud-palette-info); }

.ai-md strong { font-weight: 700; color: var(--mud-palette-text-primary); }

/* Código en línea: fondo translúcido neutro y color heredado (text-primary) → legible en claro y en
   oscuro. Antes usaba primary-lighten sobre tinte primary y el texto se mimetizaba con su fondo. */
.ai-md code {
    font-family: "Cascadia Code", "Fira Code", monospace; font-size: 0.82em;
    background: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.12);
    padding: 0.12em 0.4em; border-radius: 4px;
}