/*
 * Estilos del componente <DescriptionViewer />. Restauran el formato Quill
 * cuando el HTML editado se renderiza fuera del .ql-editor (detalle de proyecto,
 * tarea, PGA, etc). Todo scopeado a .description-viewer para no bleed al resto
 * de la UI.
 *
 * Cubre: parrafos, cabeceras, tachado, sub/super, listas ordenadas/con puntos
 * (formato clasico <ul>/<ol> y formato list-next de Quill 2 con data-list),
 * check-lists, sangria .ql-indent-1..8, alineacion .ql-align-*, blockquote,
 * pre.ql-syntax y code inline. Usamos !important donde el reset global del
 * tema (Bootstrap + Inspinia) fuerza valores.
 */

.description-viewer {
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
}

.description-viewer > *:first-child { margin-top: 0; }
.description-viewer > *:last-child  { margin-bottom: 0; }

.description-viewer p {
    margin: 0 0 0.5em 0;
}

.description-viewer h1,
.description-viewer h2,
.description-viewer h3,
.description-viewer h4,
.description-viewer h5,
.description-viewer h6 {
    margin: 0.75em 0 0.5em 0;
    font-weight: 600;
    line-height: 1.25;
}

/* ---- Inline ---- */
/* El tema (Inspinia) baja b/strong a semibold (~500), casi indistinguible del
   normal. En el contenido editado restauramos un peso de negrita real (700). */
.description-viewer strong,
.description-viewer b { font-weight: 700; }

.description-viewer s,
.description-viewer strike { text-decoration: line-through; }
.description-viewer u      { text-decoration: underline; }
.description-viewer sub    { vertical-align: sub; font-size: 0.75em; }
.description-viewer sup    { vertical-align: super; font-size: 0.75em; }

/* ---- Listas (formato clasico <ul>/<ol>) ---- */
/* clear: evita que la lista quede metida en el hueco de la imagen destacada flotada
   (Detail.razor: .portal-news-hero con float-md-start). Mientras una linea cae dentro
   de la altura del float, el navegador la arranca en el borde derecho de la imagen
   IGNORANDO el margin-left del <li> (el margin solo importa si supera el ancho del
   hueco), asi que cualquier sangria (3em, 6em...) queda invisible ahi. Forzando a la
   lista a empezar despues del float, la sangria por nivel vuelve a verse. Los parrafos
   normales no llevan este clear y siguen fluyendo junto a la imagen como se busca. */
.description-viewer ul,
.description-viewer ol {
    clear: left;
    padding-left: 1.5em !important;
    margin: 0 0 0.5em 0;
}

.description-viewer ul { list-style: disc outside !important; }
.description-viewer ol { list-style: decimal outside !important; }

.description-viewer li {
    margin-bottom: 0.15em;
    display: list-item;
}

/* Listas anidadas alternan estilo como en Quill/editor estandar */
.description-viewer ul ul        { list-style: circle outside !important; }
.description-viewer ul ul ul     { list-style: square outside !important; }
.description-viewer ol ol        { list-style: lower-alpha outside !important; }
.description-viewer ol ol ol     { list-style: lower-roman outside !important; }

/* ---- Listas formato "list-next" de Quill 2 (<ol><li data-list="bullet|ordered|checked|unchecked">
   <span class="ql-ui">). Es una lista PLANA (los <li> de distintos niveles son hermanos dentro del
   mismo <ol>; el nivel solo lo marca la clase .ql-indent-N), asi que la numeracion automatica nativa
   de <ol> no sirve: cuenta todos los <li> seguidos con un unico contador, ignorando el nivel (todo
   sale "1. 2. 3." sin importar la sangria, y "bullet"/"checked" tambien salen numerados porque el
   navegador no conoce el atributo data-list). Portamos la misma tecnica de contadores CSS que usa el
   propio editor Quill (.ql-editor en vendors.min.css) para que fuera del editor se vea igual: un
   contador independiente por nivel (list-0..list-8) que se resetea al entrar en cada nivel, y un
   marcador via .ql-ui:before en vez del marker nativo del <li>. Scopeado a li[data-list] (no a ol
   entero) para no tocar el marker de las listas en formato clasico (sin data-list) de arriba. */
.description-viewer li[data-list] {
    list-style: none !important;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

.description-viewer li[data-list] > .ql-ui {
    display: inline-block;
    margin-right: 0.3em;
    white-space: nowrap;
}

.description-viewer li[data-list="bullet"] > .ql-ui::before  { content: "\2022"; }
.description-viewer li[data-list="checked"] > .ql-ui::before { content: "\2611"; }
.description-viewer li[data-list="unchecked"] > .ql-ui::before { content: "\2610"; }
.description-viewer li[data-list="checked"] > .ql-ui,
.description-viewer li[data-list="unchecked"] > .ql-ui { color: #777; }

/* Ordenadas: un contador distinto por nivel de sangria (list-0 = sin sangria), con el mismo ciclo de
   estilos que Quill (decimal, lower-alpha, lower-roman, y vuelta a empezar en el 4º nivel). Cada
   regla ".ql-indent-N" resetea los contadores de los niveles MAS PROFUNDOS que N, para que una
   sublista que ya se uso vuelva a empezar en 1/a/i la siguiente vez que aparece a ese nivel. */
.description-viewer li[data-list="ordered"] { counter-increment: list-0; }
.description-viewer li[data-list="ordered"] > .ql-ui::before { content: counter(list-0, decimal) '. '; }

.description-viewer li[data-list="ordered"].ql-indent-1 { counter-increment: list-1; }
.description-viewer li[data-list="ordered"].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) '. '; }
.description-viewer li[data-list].ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-2 { counter-increment: list-2; }
.description-viewer li[data-list="ordered"].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) '. '; }
.description-viewer li[data-list].ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-3 { counter-increment: list-3; }
.description-viewer li[data-list="ordered"].ql-indent-3 > .ql-ui::before { content: counter(list-3, decimal) '. '; }
.description-viewer li[data-list].ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-4 { counter-increment: list-4; }
.description-viewer li[data-list="ordered"].ql-indent-4 > .ql-ui::before { content: counter(list-4, lower-alpha) '. '; }
.description-viewer li[data-list].ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-5 { counter-increment: list-5; }
.description-viewer li[data-list="ordered"].ql-indent-5 > .ql-ui::before { content: counter(list-5, lower-roman) '. '; }
.description-viewer li[data-list].ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-6 { counter-increment: list-6; }
.description-viewer li[data-list="ordered"].ql-indent-6 > .ql-ui::before { content: counter(list-6, decimal) '. '; }
.description-viewer li[data-list].ql-indent-6 { counter-reset: list-7 list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-7 { counter-increment: list-7; }
.description-viewer li[data-list="ordered"].ql-indent-7 > .ql-ui::before { content: counter(list-7, lower-alpha) '. '; }
.description-viewer li[data-list].ql-indent-7 { counter-reset: list-8 list-9; }

.description-viewer li[data-list="ordered"].ql-indent-8 { counter-increment: list-8; }
.description-viewer li[data-list="ordered"].ql-indent-8 > .ql-ui::before { content: counter(list-8, lower-roman) '. '; }
.description-viewer li[data-list].ql-indent-8 { counter-reset: list-9; }

/* ---- Sangria (Quill: .ql-indent-1 .. .ql-indent-8) ---- */
.description-viewer .ql-indent-1 { padding-left: 3em !important; }
.description-viewer .ql-indent-2 { padding-left: 6em !important; }
.description-viewer .ql-indent-3 { padding-left: 9em !important; }
.description-viewer .ql-indent-4 { padding-left: 12em !important; }
.description-viewer .ql-indent-5 { padding-left: 15em !important; }
.description-viewer .ql-indent-6 { padding-left: 18em !important; }
.description-viewer .ql-indent-7 { padding-left: 21em !important; }
.description-viewer .ql-indent-8 { padding-left: 24em !important; }

/* En un <li> la sangria se aplica con margin-left, no padding-left: el marcador
   nativo (list-style: ... outside) se ancla al borde del <li> e IGNORA su padding,
   asi que con padding el texto sangraba pero el punto/numero se quedaba pegado a la
   izquierda. Con margin toda la caja del <li> se desplaza y el marcador va con ella
   (mismo efecto que el li::before del editor Quill). margin = 3em * N. */
.description-viewer li.ql-indent-1 { margin-left: 3em !important; }
.description-viewer li.ql-indent-2 { margin-left: 6em !important; }
.description-viewer li.ql-indent-3 { margin-left: 9em !important; }
.description-viewer li.ql-indent-4 { margin-left: 12em !important; }
.description-viewer li.ql-indent-5 { margin-left: 15em !important; }
.description-viewer li.ql-indent-6 { margin-left: 18em !important; }
.description-viewer li.ql-indent-7 { margin-left: 21em !important; }
.description-viewer li.ql-indent-8 { margin-left: 24em !important; }

/* Neutraliza el padding-left de la regla generica .ql-indent-N (lineas de arriba,
   pensada para bloques sin marcador como <p>/<h*>): en un <li> la sangria la da el
   margin, y si ademas cogiera ese padding el texto se separaria del punto. */
.description-viewer li[class*="ql-indent-"] { padding-left: 0 !important; }

/* ---- Alineacion (Quill: .ql-align-*) ---- */
.description-viewer .ql-align-center  { text-align: center !important; }
.description-viewer .ql-align-right   { text-align: right !important; }
.description-viewer .ql-align-justify { text-align: justify !important; }

/* ---- Blockquote ---- */
.description-viewer blockquote {
    border-left: 4px solid #ccc;
    padding: 0.25em 0 0.25em 1em;
    margin: 0 0 0.5em 0;
    color: inherit;
    background: transparent;
}

/* ---- Codigo ---- */
.description-viewer pre,
.description-viewer pre.ql-syntax {
    background: #23241f;
    color: #f8f8f2;
    padding: 0.5em 0.75em;
    border-radius: 0.25rem;
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85em;
    margin: 0 0 0.5em 0;
}

.description-viewer code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.125em 0.3em;
    border-radius: 0.2rem;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9em;
}

.description-viewer pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ---- Enlaces ---- */
.description-viewer a {
    text-decoration: underline;
}

/* ---- Vista previa en grids (GridHtmlText) ----
   Texto plano recortado a N lineas (-webkit-line-clamp va en linea desde el
   componente); las tablas omitidas se pintan como un icono. */
.grid-html-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.grid-html-text-table {
    margin: 0 0.25rem;
    font-size: 1.1em;
    vertical-align: -0.15em;
    opacity: 0.7;
    cursor: help;
}