/* Estilo general del details */
  details {
    margin: 0 20px 10px 20px; /* Mantengo el margen que tenías */
    padding: 0; /* Evito padding adicional en el details */
  }

  summary.blanco::-webkit-details-marker {
    display: none;
  }
  /* Estilo del summary */
  summary.blanco {
    margin: 0; /* Elimino márgenes adicionales en el summary */
    padding: 10px; /* Mantengo el padding que tenías */
    background-color: #f0f0f0; /* Ejemplo de fondo para la clase blanco */
    cursor: pointer; /* Cursor de mano para indicar que es interactivo */
    display: flex; /* Usamos flexbox para alinear el contenido */
    justify-content: space-between; /* Espacio entre el texto y la cruz */
    align-items: center; /* Centrar verticalmente */
    list-style: none; /* Elimina el marcador por defecto */
  }

  /* Personalizamos el marcador (cruz) */
  summary.blanco::after {
    content: '+'; /* Cruz inicial */
    font-size: 1.5em; /* Tamaño de la cruz */
    font-weight: bold; /* Negrita para que se vea mejor */
    margin-right: 10px; /* Espacio a la derecha */
    transition: transform 0.3s ease; /* Transición suave para la rotación */
  }

  /* Cambiamos la cruz a una 'x' o rotamos cuando está abierto */
  details[open] summary.blanco::after {
    content: '×'; /* Cambia a una 'x' al abrir */
    /* Alternativa: Si prefieres rotar la cruz en lugar de cambiarla, usa: */
    /* transform: rotate(45deg); */
  }

  /* Estilo del contenido dentro del details */
  details > :not(summary) {
    padding: 10px; /* Añado padding para que no se vea pegado */
  }

  ul{
    margin: 0;
  }