/* =========================================================
   LO QUE VIVÍ ES ABUSO
   Sangría responsive correcta para listas del contenido.
   NO afecta navbar.
   ========================================================= */

/*
 * IMPORTANTE:
 * list-style-position: outside hace que cuando el texto
 * ocupe dos o más líneas, las siguientes comiencen
 * debajo del TEXTO y no debajo de la viñeta.
 */

body ul:not(.navbar-nav):not(.dropdown-menu) {
    list-style-position: outside !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: clamp(
        1.65rem,
        4vw,
        2.15rem
    ) !important;

    padding-inline-start: clamp(
        1.65rem,
        4vw,
        2.15rem
    ) !important;

    max-width: 100% !important;
}


body ul:not(.navbar-nav):not(.dropdown-menu) > li {
    display: list-item !important;

    list-style-position: outside !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: .35rem !important;
    padding-right: 0 !important;

    text-indent: 0 !important;

    text-align: left !important;

    line-height: 1.55 !important;

    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: break-word;
    word-break: normal;
}


/* Separación uniforme entre puntos */
body ul:not(.navbar-nav):not(.dropdown-menu) > li + li {
    margin-top: .28rem !important;
}


/* Viñeta alineada */
body ul:not(.navbar-nav):not(.dropdown-menu) > li::marker {
    font-size: .95em;

    color: currentColor;
}


/* =========================================================
   TARJETAS
   Mantener texto y lista correctamente contenidos.
   ========================================================= */

body .card,
body [class*="card"],
body [class*="box"] {
    min-width: 0;
    max-width: 100%;
}


body .card ul:not(.navbar-nav),
body [class*="card"] ul:not(.navbar-nav),
body [class*="box"] ul:not(.navbar-nav) {
    width: 100% !important;

    max-width: 100% !important;

    padding-left: clamp(
        1.7rem,
        4vw,
        2.2rem
    ) !important;

    padding-inline-start: clamp(
        1.7rem,
        4vw,
        2.2rem
    ) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    body ul:not(.navbar-nav):not(.dropdown-menu) {
        padding-left: 1.7rem !important;
        padding-inline-start: 1.7rem !important;
    }

    body ul:not(.navbar-nav):not(.dropdown-menu) > li {
        padding-left: .3rem !important;
        line-height: 1.52 !important;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575.98px) {

    body ul:not(.navbar-nav):not(.dropdown-menu) {
        padding-left: 1.55rem !important;
        padding-inline-start: 1.55rem !important;
    }

    body ul:not(.navbar-nav):not(.dropdown-menu) > li {
        padding-left: .25rem !important;

        line-height: 1.48 !important;

        text-align: left !important;
    }
}


/* Móvil muy pequeño */
@media (max-width: 359.98px) {

    body ul:not(.navbar-nav):not(.dropdown-menu) {
        padding-left: 1.4rem !important;
        padding-inline-start: 1.4rem !important;
    }

    body ul:not(.navbar-nav):not(.dropdown-menu) > li {
        padding-left: .2rem !important;
    }
}