.list-group-item-action {
    transition: background-color .12s ease;
    /*color: white;*/
}

.list-group-item-action:hover {
    background-color: rgba(2, 85, 139, 0.2);
    /*color: white;*/
}


/* Estilo general de listas en fondo oscuro */
.list-group-item {
    background-color: #fff;
    /* azul más oscuro */
    color: var(--text);
    border: 2px solid rgba(2, 85, 139, 0.2);
    /*transition: background-color 0.2s ease;*/
}

.list-group-item:hover {
    background-color: rgba(2, 85, 139, 0.2);
    /*color: white;
    /* un azul más claro al hover */
}

/* Números de la lista numerada */
.list-group-numbered>.list-group-item::before {
    color: var(--brand);
    /* color primario de Bootstrap */
    font-weight: bold;
}


/* --- List-group numerada: bordes parejos arriba/abajo --- */
.list-group.list-group-numbered .list-group-item{
  background:#fff;
  color: var(--text);
  border: 2px solid rgba(2,85,139,.2) !important;  /* todos los lados */
  border-radius: 0;
}

/* Superponer bordes entre ítems para que se vea una sola línea */
.list-group.list-group-numbered .list-group-item + .list-group-item{
  margin-top: -2px;   /* = grosor del borde */
}

/* Radios sólo en extremos */
.list-group.list-group-numbered .list-group-item:first-child{
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
}
.list-group.list-group-numbered .list-group-item:last-child{
  border-bottom-left-radius:.5rem;
  border-bottom-right-radius:.5rem;
}


/* Hover visible aun con márgenes negativos */
.list-group.list-group-numbered .list-group-item {
  position: relative; /* para que el z-index tenga efecto */
  z-index: 0;         /* base */
}

.list-group.list-group-numbered .list-group-item:hover {
  background-color: rgba(2, 85, 139, 0.2) !important;
  z-index: 1; /* sube por encima de los bordes vecinos */
}


/* Vars y base */
.svg-list {
  --bsize: 1rem;    /* tamaño de cada ícono */
  --bgap:  .3rem;   /* separación entre íconos */
  --textgap: .6rem; /* espacio entre los íconos y el texto */
}

.svg-list, .svg-list ul { list-style: none; padding-left: 0; margin-left: 0; }
.svg-list ul { margin: .35rem 0; padding-left: 1.25rem; }

.svg-list li { position: relative; margin-bottom: .5rem; }
.svg-list li p { margin: .25rem 0 .35rem; }
.svg-list .label { font-weight: 700; }

/* ========= Nivel 1: 1 ícono ========= */
.svg-list > li {
  padding-left: calc(var(--bsize) + var(--textgap));
}
.svg-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;                  /* alineación vertical más prolija */
  width: var(--bsize);
  height: var(--bsize);
  background: url("../../files/images/drop-water-li-1.png") center/contain no-repeat;
}

/* ========= Nivel 2: 2 íconos ========= */
.svg-list li > ul > li {
  /* 2 íconos + 1 gap entre ellos + gap de texto */
  padding-left: calc((var(--bsize) * 2) + (var(--bgap) * 1) + var(--textgap));
}
.svg-list li > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  /* ancho que ocupa el “bloque” de 2 íconos */
  width: calc((var(--bsize) * 2) + (var(--bgap) * 1));
  height: var(--bsize);
  background-image: url("../../files/images/drop-water-li-1.png"),
                    url("../../files/images/drop-water-li-1.png");
  background-repeat: no-repeat, no-repeat;
  background-size: var(--bsize) var(--bsize), var(--bsize) var(--bsize);
  background-position:
    0 0,
    calc(var(--bsize) + var(--bgap)) 0;
}

/* ========= Nivel 3: 3 íconos ========= */
.svg-list li > ul li > ul > li {
  /* 3 íconos + 2 gaps entre ellos + gap de texto */
  padding-left: calc((var(--bsize) * 3) + (var(--bgap) * 2) + var(--textgap));
}
.svg-list li > ul li > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  /* ancho del “bloque” de 3 íconos */
  width: calc((var(--bsize) * 3) + (var(--bgap) * 2));
  height: var(--bsize);
  background-image: url("../../files/images/drop-water-li-1.png"),
                    url("../../files/images/drop-water-li-1.png"),
                    url("../../files/images/drop-water-li-1.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    var(--bsize) var(--bsize),
    var(--bsize) var(--bsize),
    var(--bsize) var(--bsize);
  background-position:
    0 0,
    calc(var(--bsize) + var(--bgap)) 0,
    calc(var(--bsize) * 2 + var(--bgap) * 2) 0;
}