/*
 * 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>) ---- */
.description-viewer ul,
.description-viewer ol {
    padding-left: 1.5em;
    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">) ---- */
.description-viewer ol li[data-list="bullet"]    { list-style: disc outside !important; }
.description-viewer ol li[data-list="ordered"]   { list-style: decimal outside !important; }

/* Check lists: Quill emite <li data-list="checked|unchecked"> sin caja visible.
   Sustituimos el marker por un pseudo-elemento con caracter unicode. */
.description-viewer ol li[data-list="checked"],
.description-viewer ol li[data-list="unchecked"] {
    list-style: none !important;
    position: relative;
    padding-left: 1.4em;
}

.description-viewer ol li[data-list="checked"]::before,
.description-viewer ol li[data-list="unchecked"]::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: inherit;
}

.description-viewer ol li[data-list="checked"]::before   { content: "\2611"; } /* ballot box with check */
.description-viewer ol li[data-list="unchecked"]::before { content: "\2610"; } /* ballot box */

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

/* 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; }
.description-viewer li.ql-indent-2 { margin-left: 6em; }
.description-viewer li.ql-indent-3 { margin-left: 9em; }
.description-viewer li.ql-indent-4 { margin-left: 12em; }
.description-viewer li.ql-indent-5 { margin-left: 15em; }
.description-viewer li.ql-indent-6 { margin-left: 18em; }
.description-viewer li.ql-indent-7 { margin-left: 21em; }
.description-viewer li.ql-indent-8 { margin-left: 24em; }

/* 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; }

/* ---- 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;
}